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

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

TheHeader.vue -> TheLogin.vue

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

我需要从

OrderSummary.vue

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

给我一个错误

“无法读取未定义的属性'$emit'”

，因此显然我无法从其他组件访问

$refs

问题是如何从其他组件获取参照？ 提前谢谢

编辑1-找到的$refs仅适用于子零部件。

---

如何跨不同级别的组件访问元素？

您肯定不希望这样通过层次结构访问元素。您正在破坏封装。你想要一个

这里有一个秘密：有一个内置的，叫做

$root

。让你的订单摘要做什么

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

并在日志的

创建的
钩子中设置侦听器：

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

通常，您应该尽量避免使用refs。
对于稍后来到这里并希望访问父组件中的
$refs
的任何人，在这种特殊情况下，不需要发出事件，因为事件总线或存储区就足够了，但假设您希望访问父级中的某个元素以获取其属性，如
clientHeight
，
classList
等。然后您可以访问它们，如：

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

您可以在组件上放置这样的函数来完成此操作。我把我的放在混合器里：

  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

您可以尝试
this.$root.$refs.header.$refs.login…
，假设每个组件都有对其子组件的引用。听起来更像是VueX或an之类的州经理的工作，但我不喜欢这些。是的，我不想使用VueX，因为我只想在用户未登录时显示popover。简单的任务。但为什么建议避免使用REF？因为它们适用于普通的DOM Vue控制无法满足的情况。