面试题：Vue事件修饰符在组件通信中的应用

Question

在Vue父子组件通信场景下，子组件触发的事件需要用到事件修饰符来处理。假设子组件有一个点击事件，要求在父组件监听该点击事件并处理，同时要防止事件冒泡干扰其他组件，并且在点击处理函数执行前先进行防抖处理。请写出子组件和父组件中相关的代码实现。

Answer 1

子组件代码

<template>
  <button @click="handleClick">点击</button>
</template>

<script setup>
const emit = defineEmits(['customClick'])

const handleClick = () => {
  emit('customClick')
}
</script>

父组件代码

<template>
  <ChildComponent @customClick.prevent="debounceHandleClick" />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const debounceTimer = ref(null)

const handleClick = () => {
  // 实际处理逻辑
  console.log('点击处理')
}

const debounceHandleClick = () => {
  if (debounceTimer.value) {
    clearTimeout(debounceTimer.value)
  }
  debounceTimer.value = setTimeout(() => {
    handleClick()
    debounceTimer.value = null
  }, 300) // 防抖时间300ms，可按需调整
}
</script>