我有两个 Vue 组件:
Vue.component('A', {});
Vue.component('B', {});
如何从组件B访问组件A?组件之间的通信如何进行?
跨组件通信在 Vue.js 文档中并没有引起太多关注,也没有很多教程涵盖这个主题。由于组件应该是隔离的,因此您永远不应该直接“访问”组件。这会将组件紧密地耦合在一起,而这正是您想要阻止做的事情。
Javascript 有一种出色的通信方法:事件。 Vue.js内置了事件系统,主要用于父子通信。来自文档 http://012.vuejs.org/guide/components.html#Event_System:
虽然您可以直接访问 Vue 实例的子级和父级,但使用内置事件系统进行跨组件通信会更方便。它还使您的代码耦合更少且更易于维护。一旦建立了父子关系,您就可以使用每个组件的事件实例方法来调度和触发事件。
他们的示例代码来说明事件系统:
var parent = new Vue({
template: '<div><child></child></div>',
created: function () {
this.$on('child-created', function (child) {
console.log('new child created: ')
console.log(child)
})
},
components: {
child: {
created: function () {
this.$dispatch('child-created', this)
}
}
}
}).$mount()
Dan Holloran 最近写了一篇关于他在跨组件消息传递方面的“斗争”的文章,two https://danholloran.me/blog/2015/12/07/vues-js-component-messaging/ pieces https://danholloran.me/blog/2015/12/08/vues-js-component-messaging-continued/。如果您需要在没有父子关系的组件之间进行通信,这可能会对您有所帮助。
我经历过的另一种方法(除了使用事件进行通信之外)是使用中央组件注册表,该注册表具有对公共 API 的引用以及与其绑定的组件实例。注册表处理对组件的请求并返回其公共 API。
在 Vue.js 的上下文中,事件将是我选择的武器。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)