《Vue3 版本差异》Vue3.5+ 在组件或HTML元素绑定 ref 差异

v3.5 之前

  • 代码第 8 行,导入 ref
  • 代码第 10 行,使用 ref 传参为 null,变量名与 第三行 ref 同名;
vue 复制代码
<template>
    <div>
        <span ref="spanRef">这是一条测试!!!</span>        
        <button @click="onClick">点击</button>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const spanRef = ref(null)

function onClick() {
    console.log(spanRef.value.innerText)
}
</script>

v3.5 以后

  • 代码第 8 行,导入接口 useTemplateRef
  • 代码第 10 行,使用 useTemplateRef 传参为字符串 spanRef,传参与 第三行 ref 同名;
vue 复制代码
<template>
    <div>
        <span ref="spanRef">这是一条测试!!!</span>        
        <button @click="onClick">点击</button>
    </div>
</template>
<script setup>
import { useTemplateRef } from 'vue'

const spanObj = useTemplateRef('spanRef')

function onClick() {
    console.log(spanObj.value.innerText)
}
</script>
相关推荐
coding随想4 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷5 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson8 分钟前
使用Ruby接入实时行情API教程
javascript·python
祝余呀20 分钟前
HTML初学者第三天
前端·html
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956393 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js