关于 Vue3.2 + ts + jsx

344 阅读1分钟

通过ref获取dom时,问题记录 获取dom方式

vue js

const ImagesRef = ref<HTMLElement>() 

html - jsx

<div ref={ImagesRef}></div>

以上定义了ref获取值为HTMLElement类型,即 ImagesRef.value 的类型为 HTMLElement类型。
注:ref的括号中不填写任何东西

修改dom的属性时,styleHTMLElement类型下属于只读属性
webstrom下会提示

Cannot assign to 'style' because it is a read-only property.
Attempt to assign to const or readonly variable

解决方案 应使用setAttribute修改style属性

 ImagesRef.value.setAttribute(`style`, `transform:translateY(100px)`)

开发components

在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:

通过v-model:做双向绑定

<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />

简化写法