vue3 div 绑定 ref 问题？-灵析社区
我只爱钱vue3 div 绑定 ref 正常是这样的： import {ref} from "vue"; const divRef1 = ref(null) const divRef2 = ref(null) const divRef3 = ref(null) 这样的怎么不可以： import {ref} from "vue"; const divRefs = ref({ divRef1: null, divRef2: null, divRef3: null, })
梦想缔造狮"截屏2024-03-28 22.09.01.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/fb72ed6091beb7990282de9902f8fcf7.png)
"vue"解析"ref="xxx""属性时检查你的"script"中有没有同名的"xxx"的"ref"，有就绑定，换句话说是检查你的"setupState"上有没有同名的"xxx"属性；
所谓"setupState"就是你"setup() { return state }"这里的"return"的值，
""是简写的语法糖，如果换成这样写就有值了：
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.xxx"
"截屏2024-03-28 22.18.23.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/5f5510f3b83780d719dc9cf723f21ee7.png)
***
或者改成函数形式：
"截屏2024-03-28 22.23.18.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/d4bd80faae8c27e80c888fea8ae9cc91.png)