vue组件通信

vue组件通信分为横向和纵向。

**纵向**

1. props 和 $emit

props：接收来自父组件的数据

$emit：触发事件

子组件向父组件传值
1、自定义事件
2、子组件原生事件
3、原生事件的处理函数中通过$emit触发自定义事件
注：子组件不能修改props中的值，否则报错，可通过子组件自己的数据接收props中的值来解决

2. $parent 和 $children

后代组件可以通过$parent.$parent.$parent这种形式跨级通信

父组件可以通过$children[0].$children[0]这种形式跨级通信，如果有多个子组件，索引不好控制

$parent, $children, $root, $parent.$parent
非响应式，如果有多个直接子组件

3. $attrs 和 $listeners

后代组件从$attrs获取父组件传给后代组件的数据

后代组件通过$emit触发$listeners的事件将数据传给父组件

1、$attrs收集属性
2、$listeners收集事件

4. provide 和 inject

父组件向后代组件单向传递数据

单向

**横向**

1. 数据总线 

用一个中间变量保存数据

• var bus = new Vue() 

   $on绑定事件

   $emit触发事件