《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>
相关推荐
前端君6 小时前
实现最大异步并发执行队列
javascript
破无差6 小时前
《赛事报名系统小程序》
小程序·html·uniapp
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军8 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy9 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端9 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿9 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL9 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉9 小时前
Vue组件化开发介绍
前端·javascript·vue.js