本文探讨了在Vue中如何保持组件封装，同时实现不同层级组件间的通信。通过使用事件总线（Event Bus）的方式，避免了直接依赖，使得组件间的关系更加灵活。介绍了如何在祖父母组件、父组件和子组件之间传递消息，并强调了顶级组件与子组件的职责分离，以及如何通过总线组件来实现这一目标。
如果你想保持封装,那就没有了.伟大的父母不应该知道孩子.它知道祖父母,但不是有子组件或有多少.原则上,您可以将祖父母的一个实现换成另一个没有多个层的实现.或者有更多的层次来接触孩子.你可以把孩子放到顶级组件中.
您已经了解了全球事件总线的概念.不过,公共汽车不一定是全球性的.你可以把它传递给道具链. (您可以使用greatgrandparent本身作为公共汽车,但这会将其暴露给它的孩子;更好的卫生来制造真正的公共汽车.)
这将顶级组件与子组件区分开来：子组件将接收总线道具,以执行它有助于实现的顶级组件的功能.顶级组件将生成总线.
Vue.component('child', {
template: `
props: ['bus'],
methods: {
clicked: function() {
this.bus.$emit('clicked', 'hello');
},
},
});
Vue.component('parent', {
template: ``,
props: ['bus']
});
Vue.component('grandparent', {
template: ``,
props: ['bus']
});
Vue.component('greatgrandparent', {
template: ``,
data() {
return {
bus: new Vue()
};
},
created() {
this.bus.$on('clicked', this.clicked);
},
methods: {
clicked: function(msg) {
console.log('message from great grandchild: ' + msg);
},
},
});
new Vue({
el: '#app'
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
