Vue 3子组件在显示时引发点击事件

Answer 1

您可以立即将组件与按钮一起安装，以便您的事件处理程序立即开始起作用。

一个强力解决方案是向按钮添加

stop

修饰符：

@click.stop="toggleSettings"

否则在

visible

更改上添加/删除侦听器：

参见 Vue SFC Playground

watch(() => props.visible, value => 
    setTimeout(() => document[`${value ? 'add' : 'remove'}EventListener`]('click', handleClickOutside)));