首页 > 建站教程 > 前端框架 >  vue3获取动态设置的ref正文

vue3获取动态设置的ref

vue3获取动态设置的ref


我爱模板网层分享一篇关于vue3使用ref的文章:vue2 $refs在vue3中的使用方法,但那个是静态的ref,使用方法如下:


静态ref的获取与使用:

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


如果ref是动态的,就不能这么使用了,而是预先定义,然后动态赋值:

//动态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>