vue3动态创建ref
时间: 2023-12-05 19:40:56 浏览: 52
在Vue3中,可以使用`ref`函数来创建一个响应式的引用对象。如果需要动态创建`ref`,可以使用`:ref`指令和函数来实现。下面是两个例子:
1. 在模板中使用`:ref`指令和函数来动态创建`ref`:
```html
<template>
<div :ref="(el) => setItemRef(el, 'test1')"></div>
</template>
<script setup>
import { ref } from 'vue'
const setItemRef = (el, key) => {
const itemRef = ref(el)
console.log(itemRef.value) // 输出:el元素
}
</script>
```
2. 在模板中使用`:ref`指令和变量来动态创建`ref`:
```html
<template>
<div :ref="itemRef"></div>
</template>
<script setup>
import { ref } from 'vue'
const itemRef = ref(null)
onMounted(() => {
console.log(itemRef.value) // 输出:el元素
})
</script>
```
在上面的例子中,我们使用`:ref`指令来绑定一个函数或变量,当元素被创建时,函数或变量会被调用,并将元素作为参数传递给它们。然后,我们可以使用`ref`函数来创建一个响应式的引用对象,并将元素作为参数传递给它。最后,我们可以通过访问引用对象的`value`属性来获取元素。