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。

问题是如何从其他组件中获取refs？提前谢谢！

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

Answer 1

你绝对不希望像这样通过层次结构。你破坏了封装。你想要一个global event bus。

这是一个秘密：内置了一个，名为$root。让OrderSummary做

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

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

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

一般情况下，您应该尽量避免使用引用。

Answer 2

您可以在组件上放置一个类似这样的函数。我把我放在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 3

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

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

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

3 个答案: