javascript - 从与当前组件不在同一级别的其他组件访问 $refs

Question

我正在开发一个 Vue 应用程序。 它有一个标题，然后是主要内容。 嵌套和结构如下

TheHeader.vue -> TheLogin.vue

MainContent.vue -> ShoppingCart.vue -> OrderSummary.vue

我需要从 OrderSummary.vue 访问 TheLogin.vue 中的元素

this.$refs.loginPopover.$emit('open')

给我一​​个错误 "Cannot read property '$emit' of undefined" 所以显然我无法从其他组件访问 $refs。

问题是我如何从其他组件获取引用？ 提前致谢!

编辑 1 - 发现 $refs 仅适用于子组件。 如何跨不同级别的组件访问元素？

Answer 1

您绝对不希望像那样通过层次结构进行接触。你正在打破封装。你想要一个 global event bus .

有个 secret :有一个内置的，叫做$root。让您的 OrderSummary 做

this.$root.emit('openPopup');

并在 TheLogin 的 created Hook 中设置监听器:

this.$root.on('openPopup', () => this.$emit('open'));

一般来说，你应该尽量避免使用 refs。