本篇博客所有的代码均在github上: https://github.com/zuxian/
总结
- 父子通信:
父向子传递数据是通过props
,子向父是通过 events($emit)
;
通过父链 / 子链也可以通信($parent / $children)
;
$ref
也可以访问组件实例;
provide / inject API
;
$attrs/$listeners
- 兄弟通信:
Bus;Vuex
- 跨级通信:
Bus;Vuex;provide / inject API、$attrs/$listeners
1,父 ==> 子(props)
2,子 ==> 父(emit自定义事件)
3,非父子组件通信(EventBus) ---`$emit、 $on 、$off`
组件APP.vue (同时引入Hello.vue组件和World.vue组件)
methods: { sendParam () { bus.$emit('getParam', this.number) } }
created () { bus.$on('getParam', param => { this.number = param }) },
beforeDestroy () { bus.$off('getParam') }
- bus.js
import Vue from 'vue'
const bus = new Vue();
export default bus
-
组件Hello.vue
-
组件World.vue
-
组件APP.vue (同时引入Hello.vue组件和World.vue组件)
4,$ref
- ref:
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
如果用在子组件上,引用就指向组件实例
compA.vue
APP.vue
5,祖 ==> 孙(provide/inject)
vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。
在provide中指定要传递给子孙组件的数据,子孙组件通过inject注入祖父组件传递过来的数据。
6,跨级组件 `$attrs与$listeners`
-
$attrs
:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
-
$listeners
:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
-
- inheritAttrs:默认值true,继承所有的父组件属性(除props的特定绑定)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承(简单的说,inheritAttrs:true 继承除props之外的所有属性;inheritAttrs:false 只继承class属性)
-
APP.vue
-
Child1.vue
-
Child2.vue
- 结果: