vue3 div 绑定 ref 问题？

作者站长头像
站长
· 阅读数 6

vue3 div 绑定 ref 正常是这样的：

<script setup>
import {ref} from "vue";

const divRef1 = ref(null)
const divRef2 = ref(null)
const divRef3 = ref(null)
</script>

<template>
    <div ref="divRef1"></div>
    <div ref="divRef2"></div>
    <div ref="divRef3"></div>
</template>

<style scoped>

</style>

这样的怎么不可以：

<script setup>
import {ref} from "vue";

const divRefs = ref({
    divRef1: null,
    divRef2: null,
    divRef3: null,
})
</script>

<template>
    <div ref="divRefs.divRef1"></div>
    <div ref="divRefs.divRef2"></div>
    <div ref="divRefs.divRef3"></div>
</template>

<style scoped>

</style>
回复
1个回答
avatar
test
2024-06-20

answer imagevue解析ref="xxx"属性时检查你的script中有没有同名的xxx的ref，有就绑定，换句话说是检查你的setupState上有没有同名的xxx属性；所谓setupState就是你setup() { return state }这里的return的值，<script setup>是简写的语法糖，如果换成这样写就有值了：

export default {
    setup() {
        const divRefs = {
            "divRefs.divRef1": null,
            "divRefs.divRef2": null,
            "divRefs.divRef3": null,
        };
        // template中的ref="xxx" 中的 xxx 就是这里return 的对象中的xxx
        return divRefs;
    }
}

如果你有多个ref想集中在一个对象上访问，不想定义太多ref变量，你可以通过实例去访问：getCurrentInstance().refs.xxxanswer image

或者改成函数形式：answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容