vue中父组件中多次引用，导致addEventListener多次执行，该如何优雅的处理呢

Question

demo地址
点击其中一个都会触发两次

Answer 1

引用一次组件都会重新走一遍生命周期，所以mounted相当走了两遍，docuemnt也注册了两遍click事件。

还有mvvm框架不推荐直接操作dom

Answer 2

你知道vue的 @click 和 @click.stop 吗？

Answer 3

mvvm框架不建议使用dom，这会在SSR中出现问题
vue封装了一个@click，你可以改写成如下

<template>
    <element @click="handleClick">
        Clic kMe
    </element>
</template>
<script setup>
const handleClick = () => { console.log('is Click!') }
</script>

关于vue的事件处理

Answer 4

HelloWorld组件 挂载了两次，click事件当然会执行两次，可以尝试用单例模式？（让click事件不重复挂载就行，组件仍然可以多次使用）

Answer 5

vue2使用自定义指令
https://github.com/ndelvalle/...

vue3使用组合api
https://vueuse.org/core/oncli...

Answer 6

建议说出你的需求,你这个说的你的解决方案,
(只是建议你可以不说,看看有人能猜到你想要实现什么功能不)