vue必须掌握之组件通信（7种方法）

方法一：$emit / props

• 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件

方法二、$parent / $children 与 ref

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

方法三、中央事件总线bus

• 新建一个Vue事件bus对象，然后通过 bus.$emit 触发事件， bus.$on 监听触发的事件。

//eventBus.js
import Vue from 'vue';
export default new Vue();

• 在需要用到的两个不同组件分别引入即可
• 需要注意的是接受数据的组件要清除事件总线eventBus

方法四、依赖注入 provide和inject

• 适用场景：高阶插件/组件库
• 类型：
  • provide：Object | () => Object
  • inject：Array | { [key: string]: string | Symbol | Object }
• 父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
• 不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。

方法五、$attrs 和 $listeners

• 适用场景：多层、递归组件
• $attrs 是包含了所以父组件在子组件上设置的属性（除了prop传递的属性、class 和 style ）
• $listeners 是组件的内置属性，它的值是父组件(不含.native修饰器的) v-on事件监听器
  • 如果子组件已经绑定$listener中同名的监听器，则两个监听器函数会以冒泡的方式先后执行

方法六、v-model

• 父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit('input',val)自动修改v-model绑定的值
• prop属性和触发事件可以通过model修改

方法七、VueX