从与当前组件不在同一级别的其他组件访问$refs
从与当前组件不在同一级别的其他组件访问$refs
提问于 2018-02-16 07:48:23
我正在开发一个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仅适用于子组件。如何跨不同级别的组件访问元素？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-02-16 08:56:18
你肯定不想通过这样的层次结构来达到目的。您正在破坏封装。你想要一个global event bus。
这里有一个秘密:有一个内置的，叫做$root。让你的OrderSummary做
this.$root.emit('openPopup');并在TheLogin的created钩子中设置一个监听程序：
this.$root.on('openPopup', () => this.$emit('open'));一般来说，你应该尽量避免使用refs。
Stack Overflow用户
发布于 2020-10-19 22:45:44
你可以在你的组件上放一个类似这样的函数来做这件事。我把我的放在Mixin里：
public findRefByName(refName) {
let obj = this
while (obj) {
if (obj.$refs[refName]) {
return obj.$refs[refName]
}
obj = obj.$parent
}
return undefined
}我还添加了一些访问器来提供帮助：
get mycomponent() {
return this.findRefByName('mycomponent')
}一旦存在，您只需执行以下操作即可访问您的组件：
this.mycomponentStack Overflow用户
发布于 2020-10-02 15:07:20
对于任何后来来到这里并想要访问父组件中的$refs的人来说，在这种特殊情况下不是为了发出事件，因为事件总线或存储就足够了，但是假设你想访问父组件中的某些元素来获取它的属性，如clientHeight，classList等，那么你可以像这样访问它们：
this.$parent.$parent.$refs //you can traverse through multiple levels like this to access $ref property at the required level页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48818110
复制相关文章
相似问题
腾讯云开发者
