this.$refs 使用 Vue 3 选项 API 为空

Posted 2023-03-16

【中文标题】this.$refs 使用 Vue 3 选项 API 为空

【英文标题】：this.$refs empty with Vue 3 Options API

【发布时间】：2021-06-18 14:31:23

【问题描述】：

在 Vue 2 中，我曾经能够访问子组件的属性（使用 this.$refs 和动态分配的 :ref 在 v-for 循环中呈现）。

Vue 3 中的相同代码失败，当我注销this.$refs 时，对象为空。

在这里，我想访问所有孩子的“isOrderable”属性。问题似乎在于:ref="product.id" 是一个变量。如果我将其更改为ref="foobar"，那么我确实会在this.$refs.foobar 中获得last 孩子。但它 vue2 我一个包含所有子组件的数组。

  <script>
  import productItem from "./Product.vue";
  export default 
    props: ["products"],
    components: 
      'product-item': productItem
    
    methods: 
      addAllProducts() 
        const orderable = this.products.filter((p) => this.$refs[p.id][0].isOrderable);
        ...
      
    
  
  </script>

  <template>
    <form>
      <div v-for="product in products" :key="product.id">
        <product-item :product="product" :ref="product.id" />
      </div>
      <button @click="addAllProducts">Add All</button>
    </form>
  </template>

显然 vue3 发生了一些变化，但我找不到任何关于它的信息。 this.$refs 上有很多信息，但都与从组合 API 访问 refs 有关。

任何帮助表示赞赏。

【参考方案1】：

在 vue 3 中，它们改变了 refs 处理数组的方式，现在您需要传递一个函数并为您的数据设置一个状态来跟踪您的 refs https://v3.vuejs.org/guide/migration/array-refs.html#frontmatter-title。

我不知道您的代码是如何构建的，但也许有比使用 refs 更好的解决您的问题的方法，如果在产品项目可订购时切换的逻辑存在于产品项目组件中，您可以拥有一个当可订购值更改时发出的事件更新具有每个产品的 id 的 orderableProducts 数组，您甚至可以在具有 vue3 的多个 v-models 选项的 v-model 中使用它。这样，您就不需要保留 dom 的引用来过滤可订购的那些。