vuejs3 - 如何在 Vue.js 3 中访问动态 ref 标记的 html 元素？

Question

使用 Vue.js 2 api-composition，您可以.ref在. 正如许多文章和此线程中所述：https ://github.com/vuejs/composition-api/issues/226它在 vue.js 3 中不可用，您应该声明与 ref 同名的属性-ed 元素：setupContextsetup()

<div ref='name'/>

setup() {
  return {
    name : ref(null)
  }
}

但是，当您不知道 ref 名称时怎么办setup()？

像这个“最小”的例子：

<div v-for="e in elements" @click="elements.push({name:Math.random(), content:Math.random()})">
  <div :ref="e.name">e.content</div>
</div>

setup(){
   return {
     a_function_called_later(){
       // I can use this.$refs but is there a more "vuejs3" way to do it ?
     }
     // ...???
   }
}

Answer 1

我有同样的问题，并在 Vue.js Discord 中询问它。幸运的是Carlos Rodrigues可以帮助我。

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

<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

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

      return {
        list,
        divs
      }
    }
  }
</script>

您可以在官方文档中阅读更多相关信息：https ://composition-api.vuejs.org/api.html#template-refs或我的博客：https ://markus.oberlehner.net/blog/refs-and -the-vue-3-composition-api/