vue组件通信

vue组件通信

• 父子通信
• 兄弟通信
• 跨级通信

父子通信：

1. 最常见的方法是 父传子，子组件通过props接收传递过来的数据，子组件传递给父组件数据是通过this.$emit触发相应事件并传递数据。
2. 父子通信还可以通过 this.$parent 和this.$children直接得到对应组件的实例。
3. 可以通过 给组件添加ref=“name”属性，然后利用this.$refs.name 直接获取对应的组件对象。2、3方法都是可以直接获得组件对象，且只能用于父子之间的通信。

兄弟通信和跨级通信

1. 通过eventbus（事件控制中心）：具体可以看我的另一篇博客EventBus

2. $attrs、$listeners:
   $attrs接收的是父组件通过行内属性传给子组件的属性，且没有被props接收的。
   $attrs接收的属性是没有被劫持的，所以不会响应式更新(与props接收的属性的区别)。
   $listeners接收的是父组件传递过来的自定义事件。

3. porivide inject：
   具体看我的笔记vue组件通信

4. vuex：最常用的兄弟组件交互。具体看我的博客vuex