Vue3 事件处理涉及到对 DOM 的操作，而获取 DOM 必须在 setup 中进行，该怎么办？

2022-08-03 13:36:07 阅读：204 来源： 互联网

标签：事件处理 span 函数 DOM setup onMounted null ref

事件处理函数定义在setup()中，因为模板 ref 必须要在组件挂载之后才可以访问，而现在对于事件处理函数来说，span 这个变量的初始值是 null，所以 Vue 报错。

let span = ref(null)是官方文档获取节点的方式。起始值就是 null，且 ref 在组件挂载之后才可访问，因此，必须要在 onMounted 函数之后（包括 onMounted 函数）的生命周期函数中进行操作。

此时，Vue 就报无法找到对应的属性错误：

<script setup>
import { ref } from 'vue';

let span = ref(null);

function onclickButton() {
	span.value.style.color = 'red';
}
</script>

<template>
	<div class="demo">
		<span ref="span">Hello Vue!</span>
		<button @click="onclickButton">Click</button>
	</div>
</template>

事件处理函数不得不定义在onMounted函数里，只有这样按钮才可以绑定函数。解决方案：在setup()函数定义一个存储事件处理函数的对象：

<script>
// ......

let methods = {}

onMounted(() => {
	methods.onclickButton = () => {
		span.value.style.color = 'red';
	};
});
</script>

<template>
	<div class="demo">
		<span ref="span">Hello Vue!</span>
		<button @click="methods.onclickButton">Click</button>
	</div>
</template>

标签：事件处理,span,函数,DOM,setup,onMounted,null,ref
来源： https://www.cnblogs.com/shiramashiro/p/16546688.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3 事件处理涉及到对 DOM 的操作，而获取 DOM 必须在 setup 中进行，该怎么办？