Vue3 setup 冒泡点击事件：同时触发父元素和子元素点击

<template>
  <div @click.stop='handleParentClick'>
    <div @click='handleChildClick'>子元素</div>
  </div>
</template>
<script>
import { ref } from 'vue';

export default {
  methods: {
    handleParentClick() {
      // 点击父元素时，手动触发子元素的点击事件
      this.$refs.child.click();
    },
    handleChildClick() {
      console.log('子元素被点击');
    }
  }
}
</script>
<p>在上面的代码中，我们在父元素上使用@click.stop修饰符来阻止点击事件冒泡。然后，在父元素的点击事件处理函数handleParentClick中，通过this.$refs.child.click()手动触发子元素的点击事件。这样就能同时触发父元素和子元素的点击事件了。</p>