vue3组件通信的方式总结及实例用法 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.jsimport { 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
封装