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.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.jsimport mitt from 'mitt'const mitt = mitt()export default mitt

组件之间使用

// 组件A // 组件B 

看完上述内容，你们掌握vue3组件通信的几种方式分别是这样的的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！