vue - 组件间通信

1）、父子组件传值：

• 父 ---> 子传：

  • props --------> 在组件中使用props接收传递的属性数据，在子组件中就可以使用这些数据

  • $root --------> 将数据存储在根组件中，在子组件中使用$root可以获取到根组件对象，进而就可以使用根组件中的数据

  • $parent --------> 将数据存储在父组件中，在子组件中使用$parent获取到父组件对象，就可以使用父组件数据

• 子 ---> 父传：

  • this.$emit("" , 数据) --------> 子组件激活父组件中的自定义事件，将数据传递给自定义事件对应处理函数

  • $refs --------> 允许在父组件中获取子组件对象，进而拿到子组件中的数据或者函数等（尽量少用）

2）、兄弟组件：

1）、状态提升：子1 ---> 父 ---> 子2

2）、事件总线（event-bus）

原理：使用vue对象的 $on 和 $emit 完成。

具体做法：假设SonA给SonB传递数据。新建一个空的vue对象。在SonA里和SonB引入该vue对象。

$emit：触发事件（在SonA --- 传递者）

$on：绑定事件（在SonB --- 接收者）