vue3在setup中操作DOM元素触发事件
时间: 2024-02-29 18:52:12 浏览: 33
在Vue 3中,建议使用`ref`来处理DOM元素,以及使用`onMounted`和`onUpdated`来触发事件。具体可以参考以下代码:
```javascript
<template>
<div>
<button ref="btn">Click Me</button>
</div>
</template>
<script>
import { ref, onMounted, onUpdated } from 'vue';
export default {
setup() {
const btn = ref(null);
const handleClick = () => {
console.log('Button clicked');
};
onMounted(() => {
btn.value.addEventListener('click', handleClick);
});
onUpdated(() => {
btn.value.addEventListener('click', handleClick);
});
return {
btn,
};
},
};
</script>
```
在上面的代码中,我们使用了`ref`来获取DOM元素,然后在`onMounted`和`onUpdated`生命周期钩子中添加了`click`事件监听器。当组件被挂载或更新时,都会重新添加事件监听器。这样就可以在`setup`中操作DOM元素并触发事件了。