Vue2 + 组合 API - 动态模板参考

Question

我正在使用带有 Vue2 + 组合 API 的 Quasar (quasar.dev) 并尝试访问具有动态生成的 'v-bind:ref' 属性的 DOM 元素，遵循 Vue3 文档的此页面：

https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for

这是问题的代码和框简化表示： https://codesandbox.io/s/suspicious-pine-90qgd?file=/src/components/MyOuterComponent.ts

我的组件模板（MyOuterComponent.vue）：

<template>
  <div>
    <my-component
      v-for="(item, i) in list"
      v-bind:ref="
        (el) => {
          if (el) divs[i] = el
        }
      "
      v-bind:key="i"
    >
      {{ item }}
    </my-component>
  </div>
</template>

<script src='./MyOuterComponent.ts' />

以及该组件的脚本：

import MyComponent from './MyComponent.vue'
import TMyComponent from './MyComponent'
import {
  defineComponent,
  onMounted,
  ref,
  reactive,
  onBeforeUpdate
} from '@vue/composition-api'
export default defineComponent({
  name: 'MyOuterComponent',
  components: { MyComponent },
  props: {},
  setup(props, context) {
    const list = reactive([1, 2, 3, 4, 5])
    const divs = ref<InstanceType<typeof TMyComponent>[]>([])

    // make sure to reset the refs before each update
    onBeforeUpdate(() => {
      divs.value = []
    })

    onMounted(() => {
      context.root.$nextTick(() => {
        console.log('THE COMPONENTs', divs, context.root.$refs)
        divs.value.forEach((div) => {
          console.log('My Div Ref: ', div)
        })
      })
    })
    return {
      list,
      divs
    }
  }
})

正如在文档中看到的那样，我期望divs填充我动态生成的组件的模板引用，这就是我模板中的这一行应该做的：

v-bind:ref="(el) => { if (el) divs[i] = el }"

即使在 nextTick 之后记录， divs仍然为空。 我希望在那里看到 5 个引用 DOM 元素的项目。

如果我将模板更改为：

<template>
  <div>
    <my-component
      v-for="(item, i) in list"
      v-bind:ref="item"
      v-bind:key="i"
    >
      {{ item }}
    </my-component>
  </div>
</template>

<script src='./MyOuterComponent.ts' />

我在context.refs中看到了引用，但有人告诉我这个属性将在 Vue3 中被删除；-(

有人可以告诉我哪里出错了吗？ 谢谢。

Answer 1

看起来 vue-composition-api (vue2) 不支持:ref 语法。 看看https://github.com/vuejs/composition-api#limitations

那里的警告应该非常有帮助。

Answer 2

一个简单的方法是在列表中添加一个 ref。 您可以使用索引访问 refs

这个对我有用

<template>
  <div>
    <my-component
      ref="mycomponentRef"
      v-for="(item, i) in list"
      v-bind:ref="
        (el) => {
          if (el) divs[i] = el
        }
      "
      v-bind:key="i"
    >
      {{ item }}
    </my-component>
  </div>
</template>

<script>
export defineComponent({
  setup() {
    // this is an array, [ref0, ref1, ...]
    const mycomponentRef = ref()

    return { mycomponentRef }
  }
})
</script>

Answer 3

尽管目前不支持，但您仍然可以使用旧的 $refs 作为解决方法。 这不在 Vue3 中，但在它实现之前你会坚持下去。

  <div v-for='i of 10' :key='i' ref='myRefs' />

setup(props, {refs}){
  // Workaround until Vue2 Composition API supports dynamic template refs.
  onMounted(()=>{
     myRefs = refs.myRefs // array of 10 refs
  })
}