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等异常情况(和生命周期的执行顺序有关)
-
4.vuex
5.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-插槽
