从与当前组件不在同一级别的其他组件访问 $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 仅适用于子组件。如何跨不同级别的组件访问元素？

原文由 Vishwas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您绝对不希望像那样通过层次结构进行访问。你正在打破封装。你想要一个 全局事件总线。

这是一个秘密：有一个内置的，叫做 $root 。让你的 OrderSummary 做

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

并在 TheLogin 的 created 挂钩中设置一个监听器：

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

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

原文由 Roy J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于稍后来到这里并希望在父组件中访问 $refs 的任何人，在这种特殊情况下不会发出事件，因为事件总线或存储就足够了，但我们只是说您想访问父组件中的某些元素获取它的属性，例如 clientHeight ， classList 等，然后您可以像这样访问它们：

 this.$parent.$parent.$refs //you can traverse through multiple levels like this to access $ref property at the required level

原文由 Abdullah Sohail 发布，翻译遵循 CC BY-SA 4.0 许可协议