vue中组件通讯的方式

vue中组件通讯的方式有哪些？

Vue是数据驱动视图更新的框架，所以在对于vue来说组件之间的数据通讯非常重要的，那么组件之间是如何进行通信的呢？我们在说他们之间通信方式之前，首先要知道vue组件之间存在什么样的关系，打个比方，我们在日常生活中，逢年过节回家，家里来了人，你要知道你和他们什么关系，这样才能知道怎么称呼对吧。

Vue组件之间存在两种关系，一种是父子关系，另一种就是非父子关系了。

一、父子关系的组件传值的方式
1.父传子
第一种方式：利用自定义属性。当子组件在父组件当标签使用时，给子组件标签绑定一个自定义属性，值为需要传递的参数。在子组件内部通过**props**的方式进行接收。接收的方式有两种在，一种是数组，一种是对象。
第二种方式：利用Provide/inject传值。简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

2.子传父
第一种：利用自定义事件。当子组件在父组件当标签使用时，给子组件标签绑定一个自定义事件，值为主要接收参数的函数。在子组件内部通过**this.$emit**进行传递数据，$emit中第一个参数是自定义事件名称，参数2是需要传递的数据。
第二种方式：插槽作用域。在组件标签内部需要写一个template组件，属性为v-slot，值为传递过来的属性（是一个对象），template内部包裹的是需要接收的内容。在组件内部，通过给<slot></slot>绑定自定义属性，值需要传递的内容。

二、非父子关系的组件传值方式
第一种：通过给Vue的原型身上添加一个公共的属性，值为Vue的实例，传值的一方调用$emit，接收的一方调用$on.
添加一个公共属性：	Vue.prototype.$observer=new Vue();
传值：this.$observer.$emit("sendHandle",xx);
接收：在created(){}创建后进行接收数据比较合适。
created(){
this.$observer.$on("sendHandle",(params)=>{
console.log(params);//接收的参数
})
}

第二种：手动封装事件订阅（封装$emit,$on,$off）（其他文章有写到封装）
第三种:eventBus
第四种：Vuex
第五种：mobx

后面三种方式，另做解释。

• 点赞
• 收藏
• 分享
• 文章举报