vue3： ref、动态ref

ref

静态ref的获取与使用

<template>
    <div ref="cptRef">...</div>
</template>
<script setup>
    import { ref } from 'vue'
    const cptRef = ref(null)
    // 可通过cptRef.value获取组件上的属性或方法
</script>

动态ref

:ref="varRef" 设置ref及其使用

<template>
    <el-button :ref="setItemRef">动态Ref</el-button>
</template>
<script setup>
    import { ref } from 'vue'
    
    // 设置一个遍历用来保存动态的ref对象
    const tableRef = ref(null)
    // 赋值动态ref到变量
    const setItemRef = el => {
        if (el) {
            tableRef.value = el
        }
    }
</script>

遍历ref

v-for设置ref及其使用

<template>
    <component v-for="item in cptArr" :key="item.type" :ref="setItemRef" :is="item.type"></component>
</template>
<script setup>
    import { ref } from 'vue'
    const cptArr = [
        {
            type: 'imgCpt',
            option: {}
        },
        {
            type: 'advCpt',
            option: {}
        }
    ]
    const itemRefs = []
    const setItemRef = el => {
        if (el) {
            itemRefs.push(el)
        }
    }
    itemRefs.forEach(item => {
        // item 即为对应的组件ref
        // 可通过 item 获取对应组件上的属性或方法
    })
</script>