当前位置：首页 > article >正文

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

article 2024/10/21 6:25:16

组件上的 ref，组合式写法的变化；
在 2024.09.03 发布的 v3.5.0 版上新增接口 useTemplateRef；

v3.5 之前

代码第 8 行，导入 ref；
代码第 10 行，使用 ref 传参为 null，变量名与第三行 ref 同名；

<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 同名；

<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>

查看全文

http://www.kler.cn/news/358347.html