Vue_组件间的通信方法汇总

最近把Vue中组件间通信的方法照着天禹老师的教程全部学完了，从props到最后的消息订阅与发布（pubsub） 在此做个总结。由于是Vue初学者，根据自己所学习的程度进行总结，可能会有总结不对的地方，还请各位大神批评指正~

1.props 

主要应用场景：父组件=>子组件

方式：父组件中传递<demo name="xxx">        xxx表示要传递的数据       

        子组件中接收：props：[name]

小tips：同时该传递方式还可以用来传递方法，通过v-bind:check = "checkTodo" 数据绑定的方式传输，在子组件中可以通过this.check来调用这个方法。我们应该避免在子组件中更改传入的props元素，这时Vue会报错。

2.组件的自定义事件

主要应用场景：子组件=>父组件

方式：首先，在父组件中自定义一个事件，例，<div @checkTodo=“check”>

           随后，我们在子组件中通过组件实例对象上的$emit()方法来注册这个自定义事件，例如，this.$emit('checkTodo',xxx) 同时，将子组件上的数据传入父组件，xxx可以传

3.全局事件总线（$bus）

主要应用场景：任何组件之间的通信

方式：1.必须安装一个全局事件总线，原因：所有组件上的方法都是通过调用全局事件总线上的方法来实现的，其中的原理是通过vue中的一个内置关系关系Vuecomponent.prototype.__proto__ === Vue.prototype 来实现的，它使得任何组件都可以调用vue实例上的方法和数据

         2.使用全局事件总线，通常在mounted(页面挂载完毕)中绑定自定义事件，在需要数据的组件中绑定

        方式：this.$bus.$on('事件名',函数)

         3.传递数据

        this.$emit("事件名",需要传递的数据)

        4.最后，最好在beforedestory中解绑当前组件所用到的事件(既然组件已经被销毁，那么其中的绑定的事件就不需要出现在vue中了)

 

4.消息的订阅与发布 （不常用）

应用场景：任何组件之间的通信

方式：1.安装pubsub：npm i pubsub-js 

之后在所需要用到该方法的组件中，引入pubsub   import pubsub from 'pubsub-js'

           2.使用 接收数据 pubsub.subscribe("hello",函数方法)

 

                   传递数据 pubsub.publish("hello",.....数据)

          3.最后，同样建议在组件销毁之前销毁pubsub

以上就是我所掌握的组件间通信的一些方法，欢迎大家批评指正，有更多更好的方法也可以分享到评论区，大家一起学习~