《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>
相关推荐
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro2 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
软件技术NINI8 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
quweiie9 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
闲蛋小超人笑嘻嘻10 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
巴博尔10 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城10 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
会写代码的饭桶11 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中11 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略11 小时前
web vue之状态管理Pinia
前端·javascript·vue.js