vue中组件互相通信几种方式

vue中组件互相通信几种方式
1，父组件向子组件传递 props法
实现步骤：先在父组件中对子组件进行绑定值，用v-bind去绑定要传递的值，子组件在props中引入，然后子组件就能使用父组件传递的数据了。
父组件部分

子组件部分

2，子向父组件传递 props法
实现步骤：父组件先给子组件用props传递一个方法，子组件通过props接受父组件穿过来的方法，并且子组件通过调用这个方法将需要传递的值通过参数的方法利用方法把参数传给父组件，父组件就可以用子组件传递过来的值了
父组件部分

子组件部分

3，子组件传父组件 自定义事件法
实现步骤：先在父组件中为子组件绑定自定义事件，并且添加相应的函数用来接受子组件那边传过来 的数据，接着在子组件中去用$emit触发自定义事件。
父组件


子组件部分

5，全局事件总线（vue2中通过在vm的原型上挂载一个公共事件总线）
首先先创建一个空的vue实例作为事件总线
const eventbus=new vue()

 然后挂载到vue的原型上一遍所有的组件实例都能访问
 vue.prototype.$bus=eventbus
 
 然后根据订阅发布模式进行绑定
 订阅者也就是需要接受信息的组件去创建定义
 this.$bus.$on("eventname",eventdata=>{})
 
 发布者也就是需要发送信息的组件去创建定义
 this.$bus.$emit("eventname",eventdata)

最后在组件销毁前需要去手动解绑,提升性能
this.$bus.$off("eventname",callback)

6，provide和inject（适用于祖孙之间通信）
祖先组件定义 provide：{
eventname：‘data1’，
}
孙组件定义 inject：[‘eventname’] 可以直接通过this去访问

弊端不是响应式需要手动去添加watch监听，而且不知道来源去处混乱，破坏了组件封装性不建议经常使用

7， $attrs和 $listeners
$attrs可以接受到父组件传递过来的属性值，子组件可以通过这个属性去访问值，但是如果子组件props接受了， $attrs就无法接受到属性值
$listeners 可以接受到父组件传过来的事件，只能传事件
$attrs同样接受到的值也不是响应式数据

8，通过vuex去管理数据，实现组件之间的通信（另外自己写一篇细讲）