Vue组件间通信的四种方式（函数回调，自定义事件，事件总线，消息订阅与发布）

目录

概述 

props配置项-回调函数实现

自定义事件实现

事件总线实现

消息订阅与发布实现（pubsub-js库）

---

概述 

在组件化编程中，组件间的通信是重要的，我们可以有四种方式实现组件间的通信。

分别是：函数回调，自定义事件，事件总线和消息订阅与发布。

props配置项-回调函数实现

需求：父组件（App.vue）给子组件（Student.vue）传递数据 

父组件想要给子组件传递数据，只需要父组件在使用子组件的位置直接声明传递即可，子组件使用props配置项接收父组件传入的数据。

App组件（父组件）

<template><div id="app"><!--将data中的数据name传入Student子组件--><Studnet :name="name"></Studnet></div>
</template><script>
import Studnet from './components/Studnet.vue'export default {name: 'App',data(){return {name:"Tom"}},components: {Studnet}
}
</script>

Studnet组件（子组件）

<template><div><button @click="printAppData">点击</button></div>
</template><script>export default {name:"Student",// 子组件Student使用props配置项接收父组件传入的数据// 接收时注意需要加引号props:["name"],methods:{printAppData(){// 当点击事件触发后直接打印传入的数据console.log(this.name);}}}
</script>

当父组件传递给子组件数据后，像如上案例，传入的数据会存在子组件的data中，是响应式的。 

 测试 ：当我们点击按钮后，查看控制台

子组件给父组件传递数据

 我们在实现子组件给父组件传递数据的时候，要是还是想要使用props直接传递的话显然不合适。

因为props只能父组件在调用子组件时声明传递数据。

但是，虽然我们不能直接传递数据，但是我们可以换一个思路，那就是我们在父组件向子组件传递回调函数，当子组件在合适的时机调用传入的回调函数时可以设置函数参数，那么我们在父组件的函数实现就可以获取到调用函数时传入的参数数据。

 App组件（父组件）

<template><div id="app"><!--传递回调函数getData--><Studnet :name="name" :getData="getData"/></div>
</template><script>
import Studnet from './components/Studnet.vue'export default {name: 'App',data(){return {name:"Tom"}},components: {Studnet},methods:{// 编写处理函数，可接受参数，当子组件调用并传入参数后在此可以接收到getData(age){console.log("获取到子组件的参数:",age);}}
}
</script>

 Student组件（子组件）

<template><div><button @click="printAppData">点击(父向子组件传数据)</button><!--当点击的时候执行传入的回调函数并传入参数数据age给父组件的处理函数--><button @click="getData(age)">点击(子向父组件传数据)</button></div>
</template><script>export default {name:"Student",// 接收回调函数getDataprops:["name","getData"],data(){return{age:18}},methods:{printAppData(){console.log("接收到父组件传递的数据是:",this.name);},}}
</script><style></style>

 总结 ：

1.如上实现组件的通信主要就是依靠props传递，要是父组件想要给子组件传递数据，直接在模板中使用子组件时声明传递即可。

2.如果子组件想要给父组件传递数据，那么需要父组件传入代参的回调函数，当子组件想要给父组件传递数据时，就调用回调函数并且传参，父组件中的回调处理函数就可以接收到子组件调用时传入的参数了。

3.使用此方式通信有一定缺点，如果是多层的组件嵌套，那么需要使用props逐层传递才可以，并且不可以实现兄弟组件间的通信。

自定义事件实现

需求：子组件给父组件传递数据（使用自定义事件实现）

 实现 ：我们可以在父组件中给子组件绑定一个自定义事件，并且在父组件中编写事件处理函数，子组件在合适的时机执行此自定义事件的时候传递一些数据即可。触发方式类似于第一种方式，但是此方式省去了使用props传递和接收的步骤。

App组件（父组件） 

<template><div id="app"><!-- 给Student组件（子组件）绑定一个myEvent自定义事件 --><Studnet @myEvent="myEvent"/></div>
</template><script>
import Studnet from './components/Studnet.vue'export default {name: 'App',data(){return {}},components: {Studnet},methods:{// 当自定义事件被子组件触发时，执行此函数获取触发事件时传入的参数myEvent(name){console.log("获取到子组件的参数:",name);}}
}
</script>

 Student组件（子组件）

<template><div>// 声明一个点击事件做测试<button @click="clcikHandle">点击触发自定义事件</button></div>
</template><script>export default {name:"Student",// 接收回调函数data(){return{name:"Tom"}},methods:{// 当点击事件触发后，我们使用$emit触发自定义事件，并传入参数clcikHandle(){// 参数：$emit（'自定义事件名称'，传入的参数可以是多个，逗号分隔）this.$emit("myEvent",this.name)}}}
</script>

 测试 ：当我们点击按钮，控制台打印：

 

在其中我们给子组件绑定自定义事件还有另一种方式：

给子组件声明ref属性，这样就可以使用this.$refs获取到给节点（Student子组件）

<Studnet ref="studnetComp"/>

通过ref属性获取到节点，再给节点绑定事件即可，此方式更灵活

this.$refs.studnetComp.$on("自定义事件",处理函数)

解绑自定义事件

this.$off(["事件名称1"，"事件名称2"]) // 可以一次解绑多个自定义事件

事件总线实现

 事件总线 ：实现任意组件间的直接通信，上方的props传递回调函数或者是自定义事件的方式实现的组件通信都存在一些不足，当我们想要第一级组件和第三级组件间的通信时，就需要逐层传递，又或者是兄弟组件间通信是实现不了的，所以出现了事件总线的事件。

原理概述：其原理就是我们找出一个公共可访问区域，在此区域绑定自定义事件，当想要给某组件传递数据时，只需要执行该组件在公共区域放置的自定义事件并传递参数即可。

例如：A组件想要给B组件传递参数，那么我们就可以让B组件在公共区域绑定自定义事件并编写带参的事件处理函数，当A想要给B传递参数时，只需要在公共区域找到B组件声明的自定义组件使用$emit执行并传入参数即可，当执行了自定义事件，A组件的事件处理函数就会获得执行时传入的参数。

 示例图解 ：当我们B组件想要给A组件传递数据时，只需要A组件在公共区域绑定自定义事件，并书写事件处理函数接收参数，当B组件想传递数据的时候，找到A组件在公共区域绑定的自定义事件执行并传入参数，那么A组件中的事件处理函数将接收到传来的参数，那么我们就可以实现B组件给A组件传递数据了。

此公共区域可以为任意组件服务，实现任意组件的数据直接通信，所以我们称此公共区域叫做事件总线，因为它控制着所有组件的事件绑定。

公共位置是需要一些条件的，例如可以使用$emit,$on等方法，并且可以放置自定义事件。

其实就是在VUE原型对象上绑定，可以在VUE原型对象上绑定事件，并且可以使用原型上的方法，那么我们就只能考虑实例对象vc或vm当作我们的总线。

 需求：兄弟组件间传递数据 （Student组件给Student1组件传递数据）

1.给Vue原型对象上添加$bus属性，值为vm （安装全局事件总线）

// 在mian.js中操作
new Vue({render: h => h(App),beforeCreate(){// 给Vue原型对象添加$bus属性，值为vm，当做我们的总线Vue.prototype.$bus = this}
}).$mount('#app')

2.Student1（数据接收方）组件在总线上绑定事件

export default {
name:Student1,
mounted(){// 当Vue挂载完毕给vc的$bus属性绑定自定义事件this.$bus.$on("myEvent",this.printInfo)
},
methods:{// 编写事件处理函数printInfo(args){// 当有组件执行自定义事件后就可以接收到参数console.log("获取到的参数为:",args);}
}

ps：其中至于此方式我们在Vue原型上声明的$bus属性，vc可以访问到的这个问题，其实是Vue更改了原型链指向。不了解可以看看这篇博客，有内存图解声明。

总之此方式就可让组件Student1在$bus上绑定自定义事件。 

 3.Studnet（数据提供方）组件在合适的时机执行studnet1在$bus上绑定的自定义事件并传入参数作为数据。

// 当点击页面上某个按钮时执行自定义事件并传入参数
clcikHandle(){// 执行$bus上的自定义事件myEvent并传入参数namethis.$bus.$emit("myEvent",this.name)
}

总结：此方式可以实现任意组件间的直接通信，并且在触发自定义事件时还可以再浏览器的Vue开发工具中捕获到一些信息。是比较推荐使用的组件通信方式实现。 

消息订阅与发布实现（pubsub-js库）

此方式也可以实现任意组件间的通信，跟事件总线的实现方式很相似，就像是事件总线的封装版。

消息发布与订阅是一种思想

订阅者：需要数据的组件

发布者：提供数据的组件

概述：当订阅者想要获取数据，就要对外暴露订阅消息，指定订阅的消息名，当发布者想要给某个订阅者发送消息，就要找到订阅者订阅的消息名，就能够实现数据传递。

实现此思想的JS库有许多，在此使用pubsub-js做演示

 使用步骤：

需求：Student组件给Student1组件传递数据 

1.下载库pubsub-js

2.订阅消息（Studnet1组件-接收数据）

导入pubsub库

import pubsub from "pubsub-js"

// 发布订阅消息，当有对应消息名称发布时会传递数据进来
// 消息处理函数通过函数参数接收
pubsub.subscribe("消息名",消息处理函数)

3.发布消息（Studnet组件-提供数据）

 导入pubsub库

import pubsub from "pubsub-js"

// 发布消息，对应的订阅了此消息名的函数会执行并且接收到此参数
pubsub.publish("消息名",参数)

总结：此方式跟事件总线的实现方式很像，其实两者的操作思路都是一样的，大致是:一方声明带参的事件事件处理函数，另一方执行并传入参数，但是事件总线的方式更值得推荐，因为不需要导入第三方库，并且在浏览器Vue管理工具能够捕获到触发的总线事件。