vue组件间的6种通信方式

vue组件间的6种通信方式

方法一、props/$emit
父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现

方法二、$emit/$on

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

1.具体实现方式：
var Event=new Vue();
Event.$emit(事件名,数据);Event.$on(事件名,data => {})

方法三、vuex

方法四、$attrs/$listeners

方法五、provide/inject

方法六、$parent / $children与 ref

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

vue组件的6种通信方式