Vue.js事件处理器冲突求助：双按钮仅单个生效

问题原因 #

核心问题是错误使用了自闭合的<button/>标签。HTML规范中<button>属于双标签（非自闭合标签），必须显式书写结束标签</button>。当你用<button/>时，浏览器会自动尝试补全DOM结构，但这个过程会导致意外的DOM嵌套：当FinishButton可见时，BackButton的button元素会错误包裹FinishButton的内容，点击BackButton的区域实际触发的是被包裹的FinishButton的事件逻辑，直接导致BackButton的点击事件被覆盖。

修复方案 #

修改两个按钮组件里的button标签写法，将自闭合的<button/>改为完整的双标签形式：

BackButton.vue 修改后 #

<template>
    <div>
        <button @click.stop="navigate()">返回</button>
    </div>
</template>

<script>
export default {
    name: 'BackButton',
    methods: {
        navigate(){
            console.log("B");
        }
    }
}
</script>

FinishButton.vue 修改后 #

<template>
    <div :style="visible ? { 'display': 'inline-flex' } : { 'display': 'none' }">
        <button @click.stop="navigate()">完成</button>
    </div>
</template>

<script>
export default {
    name: 'FinishButton',
    props : {
        visible: Boolean
    },
    methods: {
        navigate(){
            console.log("F");
        }
    }
}
</script>

额外优化建议 #

控制组件显示隐藏时，推荐使用Vue内置的v-show替代手动控制style的display属性，代码更简洁易维护：

<!-- FinishButton.vue 可优化为 -->
<template>
    <div v-show="visible">
        <button @click.stop="navigate()">完成</button>
    </div>
</template>

内容的提问来源于stack exchange，提问作者wittn