浅谈Vue2.0父子组件间事件派发机制(2)
上面的父子组件中,父组件中利用bus注册监听事件getData,子组件中一旦有状态变化,就触发bus上对应的事件。
这种利用空实例的方式,相当于创建了一个事件中心,所以这种通信同样适用于非父子组件间的通信,
3.多级父子组件通信
有时,可能想要实现通信的两个组件不是直接的父子组件,而是祖父和孙子,或者是跨越了更多层级的父子组件
不可能由子组件一级一级的向上传递参数,来达到通信的目的,虽然现在我们理解的通信都是这样经过中转的。可以通过while等循环,不断向上遍历,直到找到目标父组件,就在对应的组件上触发事件。
下面就只element-ui实现的一个父子组件通信的mixins,对于组件同步有很大的作用。在element-ui 的优点概述中也特意提到这个组件通信
function broadcast(componentName, eventName, params) { // 向下遍历每个子节点,触发相应的向下广播的 事件 this.$children.forEach(child => { var name = child.$options.componentName; if (name === componentName) { child.$emit.apply(child, [eventName].concat(params)); } else { broadcast.apply(child, [componentName, eventName].concat([params])); } }); } export default { methods: { // 向上遍历父节点,来获取指定父节点,通过$emit 在相应的 组件中触发 eventName 事件 dispatch(componentName, eventName, params) { var parent = this.$parent || this.$root; var name = parent.$options.componentName; // 上面的componentName 需要在每个vue 实例中额外配置自定义属性 componentName, //可以简单替换成var name = parent.$options._componentTag; while (parent && (!name || name !== componentName)) { parent = parent.$parent; if (parent) { name = parent.$options.componentName; } } if (parent) { parent.$emit.apply(parent, [eventName].concat(params)); } }, broadcast(componentName, eventName, params) { broadcast.call(this, componentName, eventName, params); } } };
首先定义两个嵌套的组件 f1.vue 和 c1.vue,实例是:
<f1> <c1></c1> </f1>
然后,分别定义两个父子组件:
c2.vue
<template> <section> <button type="button" name="button" @click="dispatchTest">点击一下,就可以</button> </section> </template> <script type="text/javascript"> import Emitter from "../mixins/emitter"; export default { name: "c2", mixins: [Emitter], componentName:'c2', methods: { dispatchTest() { this.dispatch('f1', 'listenerToC1', false); } } } </script>
f1.vue
<template type="html"> <div class="outBox-class"> <slot> </slot> </div> </template> <script type="text/javascript"> import Emitter from "../mixins/emitter"; export default { name: "f1", mixins: [Emitter], componentName: 'f1', mounted() { this.$on("listenerToC1", (value) => { alert(value); }) } } </script>
内容版权声明:除非注明,否则皆为本站原创文章。