Vue2中
<template>
<div id="app">
<div ref="echohye">新年快乐</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.echohye); // <div>新年快乐</div>
},
};
</script>
上段代码中可以看到我们在 div 元素上绑定了 ref 属性,并命名为 echohye,接下来我们直接使用 this.$refs.echohye的方式就可以获取到该 DOM 元素了。
Vue3中
<template>
<div ref="echohye">新年快乐</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
const echohye = ref(null);
onMounted(() => {
console.log(echohye.value); // <div>新年快乐</div>
});
</script>
上段代码中我们同样给 div 元素添加了 ref 属性,为了获取到这个元素,我们声明了一个与 ref 属性名称相同的变量 echohye,然后我们通过 echohye.value 的形式便获取到了该 div 元素。
注意:变量名称必须要与 ref 命名的属性名称一致。
箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。