vue3设置和读取静态ref的方法：
<template>
<div ref="mubanRef">我爱模版网</div>
</template>
<script setup>
import { ref } from 'vue'
const mubanRef = ref(null)
// 可通过mubanRef.value获取组件上的属性或方法
mubanRef.value.style.color = 'red'
</script>vue3设置和读取动态ref的方法：
<template>
<div :ref="setItemRef">动态Ref</div>
</template>
<script setup>
import { ref } from 'vue'
// 设置一个遍历用来保存动态的ref对象
const mubanRef = ref(null)
// 赋值动态ref到变量
const setItemRef = el => {
if (el) {
mubanRef.value = el
}
}
// 调用ref的方法或设置ref的属性
mubanRef.value.style.color = 'red'
</script>vue3 v-for循环设置ref及其使用
<template>
<div v-for="item in mubanArr" :key="item.type" :ref="setItemRef" :is="item.type"></div>
</template>
<script setup>
import { ref } from 'vue'
const mubanArr = [
{
type: 'imgCpt',
option: {}
},
{
type: 'advCpt',
option: {}
}
]
const itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
itemRefs.forEach(item => {
// item 即为对应的组件ref
// 可通过 item 获取对应组件上的属性或方法
item.style.color = 'red'
})
</script>