vue3+ts 怎么写window.addEventListener
时间: 2023-12-12 22:31:28 浏览: 185
在Vue3+TS中,可以使用`ref`来获取DOM元素,然后在`onMounted`生命周期函数中添加`window.addEventListener`事件监听器。具体步骤如下:
1. 在Vue组件中使用`ref`获取DOM元素,例如:
```
<template>
<div ref="myDiv"></div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const myDiv = ref(null);
// ...
}
});
</script>
```
2. 在`onMounted`生命周期函数中添加`window.addEventListener`事件监听器,例如:
```
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const myDiv = ref(null);
onMounted(() => {
window.addEventListener('resize', () => {
// 更新操作
});
});
// ...
}
});
</script>
```
注意:在组件销毁时,需要使用`onUnmounted`生命周期函数移除事件监听器,以避免内存泄漏。
阅读全文