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

Question

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

TheHeader.vue -> TheLogin.vue

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

我需要从

TheLogin.vue

 访问 

OrderSummary.vue

中的元素

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

给了我一个错误

"Cannot read property '$emit' of undefined"

所以显然我无法从其他组件访问

$refs

。

问题是如何获取其他组件的引用？ 预先感谢！

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

Answer 1

您绝对不希望像这样遍历层级结构。你正在破坏封装。您想要一辆全球活动巴士。

这里有一个秘密：有一个内置的，称为

$root

。填写您的订单摘要

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

并在 TheLogin 的

created

挂钩中设置监听器：

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

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

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

Answer 3

您可以在组件上放置这样的函数来执行此操作。我把我的放在 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.mycomponent

Answer 4

感谢阿卜杜拉的提示！ 就我而言，我正在寻找兄弟姐妹，所以万一有人来寻找，这里有一个例子：

var RefName = 'MyCoolReferenceName';
var MyRef, x;
for (x = 0; x < this.$parent.$children.length; x++) {
  if (typeof this.$parent.$children[x].$refs[RefName] != 'undefined') {
    MyRef = this.$parent.$children[x].$refs['LABEL_' + bGroupReady.ChildID];
  }
}
if (typeof MyRef != 'undefined') {
  MyRef.error=true;
}

PS - 我这样做的原因是因为我在类星体输入和

MyRef.error = true

方面的运气为零。事实证明，您只需设置

lazy-rules="ondemand"

即可激活错误消息，红色突出显示和

.error=true

事件可将其清除。万一有人也想这样做！