vue3组件通信的方式总结及实例用法

vue3组件通信方式为以下几种

• props
• $emit
• $expose / ref
• $attrs
• v-model
• provide / inject
• Vuex
• mitt
  

props

$emit

//Child.vue


 
// Parent.vue响应

expose / ref

父组件获取子组件的属性或者调用子组件方法

 
// Parent.vue 注意 ref="comp"

attts

attrs:包含父作用域除class和style除外的非props属性集合

// 父组件


 
// 子组件

v-model

可以支持多个数据双向绑定

 
//子组件

provide / inject

provide/inject为依赖注入 provide：可以让我们指定想要提供给后代组件的数据 inject:在任何后代组件中接受想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用

// 父组件

//子组件

Vuex

//store/index.js
import { createStore } from 'vuex'
export default createStore({
    state:{count:1},
    getters:{
        getCount:state=>state.count
    },
    mutations:{
        add(state){
            state.count++
        }
    }
   })
 // main.js
 import { createApp } from 'vue'
 import APP from './App.vue'
 import store from './store'
 createApp(APP).use(store).mount("#app")
  
 // 直接使用
 
  
 // 获取
 

mitt

Vue3中已经没有了EventBus跨组件通信，替代方案mitt.js，但原理方式EventBus是一样的
安装方式 npm i mitt -S

封装

mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

组件之间使用

// 组件A 

// 组件B 

到此这篇关于vue3组件通信的方式总结及实例用法的文章就介绍到这了,更多相关vue3组件通信的几种方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！