推荐最新

vue3修改样式的问题？

1 2 3 4 5 6 7 8 9 setup(){ const allRef = ref(null) const oneRef=ref(null) const setx=(index)=>{ switch (index) { case 0: allRef.value.style.display='block' oneRef.value.style.backgroundColor='#D3EAFD' oneRef.value.style.border='1px solid #C1C1C1' oneRef.value.style.padding='20px' oneRef.value.style.fontSize='30px' oneRef.value.style.textAlign='center' break; } } return{ setx, allRef, oneRef } } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/4eb323d273ed460b9f2ec06f0b24288d.png) 为什么执行 allRef.value.style.display='block' oneRef.value.style.backgroundColor='#D3EAFD' oneRef.value.style.border='1px solid #C1C1C1' oneRef.value.style.padding='20px' oneRef.value.style.fontSize='30px' oneRef.value.style.textAlign='center' 时只有最后一个元素发生了变化？

浏览量296

超好看鸭

Vue 3中ref和shallowRef的引用类型在同一函数中修改值为何导致视图同步更新？

vue3中关于ref和shallowRef声明的引用类型在同一函数中修改值，会造成shallowRef声明的视图部分也更新的问题在视图中声明 {{ r }} {{ sr }} 修改 js代码 const r = ref({name:'111111'}) const sr = shallowRef({name:'222222'}) const change = () => { r.value.name = '333333' sr.value.name = '444444' console.log(r,sr); } 这样会造成sr也会同步更新，然后注释掉r.value.name = '333333'后，就不会。我查询过是因为ref底层和shallowRef都会触发triggerRefValue造成视图更新，但是我还是没有理解为什么reftriggerRefValue会更新另一个数据依赖查阅过资料，链接给出："https://juejin.cn/post/7264503868137127971" (https://link.segmentfault.com/?enc=t1usq%2FYA0UymTAGpRFuCBA%3D%3D.eyTCOfMG0UnwPXgCrPz0rjXXUNZd2nungcV3mE4e%2FF2QGALqTPkCARyoEqrSrUNo)

浏览量200

走你啊啊啊啊啊

Vue3 tsx 中如何同时注册 ref 并传递字符串 ref 属性到子组件?

在"Vue3"组合式语法中使用"tsx" , 往一个子组件上注册一个 "ref" 引用，同时又通过展开运算符"..." 将一个含有值是字符串的"ref"属性的 "props" 传递给子组件，此时子组件上会有2个"ref"，我该如何在子组件间中得到"props"中的字符串"ref"? 代码简单演示： const nodeRef = ref() const props = { ref:'uuid_xxx', //...any more } //... more code return "ChildComp" 可能是 "SFC" 也可能是 "tsx" 组件。这种设计不友好，但是由于某些原因，目前只能保持现状。 2个 "ref" ，一个是"mounted"后赋值为组件实例，一个是想传递到子组件内部的字符串属性。目前已经做了尝试，无法在子组件中通过 "$attrs" & "useAttrs()" 获取到透传的字符串 "ref"——"'uuid_xxx'"，但其实"'uuid_xxx'"值已经通过"$attrs"的方式挂到"ChildComp"根元素的"__id__" attribute上了。我希望能保持此种情况下，获取到该字符串ref属性值（'uuid_xxx'）。

浏览量181

加班使我熟睡

Vue 3中如何正确获取子组件插槽内的DOM实例？

vue3中，怎么获取子组件插槽内的DOM实例或者说ref? 我尝试这样获取，但是获取不到： //base-popup.vue 子组件 import { ref } from 'vue'; let slotRef = ref() function setSlotRef(el) { slotRef.value = el console.log('1:我执行了', el) } //ds-popup.vue //我想默认让这个input聚焦,不考虑自定指令 //发现子组件的setSlotRef没有执行

浏览量114

中年复健狗

React Antd Form 中如何批量创建和获取 Input 组件的 ref？

antd,form中怎么用react获取多个input的ref?难道要一个一个创建useRef,然后给input吗? 有没有统一给form里面的所有控件创建ref，然后通过某个关键字获取相应input的ref

浏览量115

疯狂的搬运工

因为 vue 的 reactive 对象会自动对 ref 对象进行解包，所以导致了 ts 报错，有什么解决方法吗？

* 当 ref 对象作为 reactive 对象的属性，在定义 reactive 对象获取其类型时或读取 reactive 对象的 ref 属性时都会对 ref 对象进行自动的解包，因此就出现了以下的 ts 报错 * 实际上下面的两个报错都是符合 vue 的特性的，并没有问题 * 有没有什么办法可以让这两种情况可以正确的识别类型，或者说可以让这两种情况不报错(之前一种用 as any 和 as unknown as xxx 来解决,感觉是在是太丑陋了)import type { Ref } from 'vue' import {ref, reactive} from 'vue'interface IObj { count: Ref | null; arr: { // 如果是这种自定义属性的对象类型则不会在 reactive 返回值的类型中进行解包 [key:string]: Ref } | null; o?: { oo: Ref } }const obj = reactive({ count: null, arr: null }) /* reactive 返回值的类型 const obj: { count: number | null; arr: { [key: string]: Ref; } | null; o?: { oo: number; } | undefined; } */// 这里ts报错: 不能将类型“Ref”分配给类型“number” obj.count = ref(1) obj.arr = { aa: ref(0), bb: ref(1) }// 这里ts报错: 不能将类型“Ref”分配给类型“number” let num:number = obj.arr.aa console.log(num); // 0

浏览量19

梦想缔造狮

Vue ref 属性在不同环境下的行为差异？

区域位置操作 const ref1 = ref(); const ref2 = ref(); const ref3 = ref(); const refApi = { ref: 'ref3' }; console.log(ref1, ref2, ref3); 在开发环境下 "ref1, ref2, ref3" 皆符合预期指向 "span" 。但是打包后的生产环境就只有 "ref1" 正常指向 "span" , "ref2, ref3" 皆为 "undefined"。为什么表现不一致？

浏览量24