模板引用
Vue 提供了许多指令让我们可以直接操作组件的模板。但是在某些情况下,我们仍然需要访问底层 DOM 元素。在模板中添加一个特殊的属性ref
就可以得到该元素。
访问模板引用
<script setup>
import { ref } from 'vue';
const demo = ref(null);
onMounted(() => {
demo.value.style.width = '20px';
});
</script>
<template>
<div>
<span ref="demo">Hello Vue!</span>
</div>
</template>
访问模板引用的时机
访问的顺序上有讲究。因为ref
本身是作为渲染函数的结果来创建的,必须等待组件挂载后才能对它进行访问。如果不再挂载之后进行访问,百分之九十九(还有百分之一是意外)都是 null
或 undefined
错误。看下图:
因此,在组合式 API 中获取了 ref
之后,最好在 onMounted
函数中进行后续的操作。把第四行代码const demo = ref(null)
放到 onMounted
里进行,或者其他生命周期函数里都是不行的,必须要在 setup
里进行。(本人已经测试过了)
事件函数访问模板引用
这里的实际应用时的问题:模板中添加一个按钮,按钮绑定函数onclickButton
,函数里访问模板引用,此时出现模板引用 null
和 undefined
。正如上面所述,ref
要在组件挂载完成之后才可以访问,setup
函数在组件挂载之前,因此事件函数定义在 setup
里就出现 null
或 undefined
错误。
并且,事件函数也许只能定义在 setup
里,按钮才可以绑定该函数。这是我测试过的,在onMounted
中定义的函数无法被按钮绑定。
解决方案:
- 在
setup
中定义对象 methods(或者其他你喜欢的变量名);在
onMounted
函数中这样使用:const demo = ref(null);
const methods = {};
onMounted(() => {
methods.onclickButton = () => {
demo.value.style.fontSize = "20px";
}
});