this.$refs为空，带有Vue3OptionsAPI

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

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

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

  <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 访问引用有关。

任何帮助表示赞赏。