vue - 组件通信

1. props/$emit

适用范围: 适合父子组件之间, 组件层级嵌套太深, 使用该方法较为繁琐,不建议使用;

代码示例:

image.png

总结:

props中接收到的值可以直接展示,但不建议直接对齐修改;
如果父组件向子组件传递的值是通过接口获取的, 可能会存在延迟的情况;

2. provide/inject

适用范围: 适用于多层次组件嵌套,通过provide/inject的方式,可以较少值在组件之间的层层传递

代码示例:

image.png

注:
a. provide: 可以是一个对象,或者是一个返回对象的函数,里面包含要传递的属性和属性值;
b. inject: 是一个字符数组或者是一个对象; 属性值可以是一个对象,包含from和default默认值;
总结:
优点: 可以在任意层级对根组件的数据进行访问;
缺点: 没有清晰的数据流向,不利于后期维护;

3. child

适用范围: 适合父子组件之间, 组件层级嵌套太深, 使用该方法较为繁琐,不建议使用;

代码示例:

image.png

总结:

如果通一个页面有多个子组件需要通过索引的方式 来确定具体的某个组件
在mounted和created生命周期中通过children[index]方式来执行对应父/子组件中的方法时,可能会出现undefined等异常情况(和生命周期的执行顺序有关)

child 方式来实现组件通信时, 对组件的层级嵌套要求很严格,不利于后期拓展维护;

4.vuex

参考vue - vuex的使用

5.eventBus(事件总线)

参考 vue - eventbus

6.listeners

适用范围: 可以减少props和attrs和$listeners向上或向下传递即可;

代码示例:

image.png

总结:

attrs–继承所有的父组件属性（除了 prop 传递的属性、class 和 style ），一般用在子组件的子元素上;
listeners属性，它是一个对象，里面包含了作用在这个组件上的所有监听器,你就可以配合
v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）;
inheritAttrs：true 继承除 props 之外的所有属性；inheritAttrs：false 只继承 class style 属性

7 slot(slot-scope)作用域插槽

参考 vue-插槽

8 参考文档

1 vue中的provide和inject
2 Vue中 listeners 详解及使用