我有一个包含两个按钮的页面。我想使用这两个按钮导航到不同的页面。

如果我只包含其中一个按钮，它就可以正常工作。如果我只包含一个作品（正如我将用调试语句显示的那样，如果第二个按钮存在，则不会触发第一个按钮的事件处理程序）。

我的猜测是，第二个按钮与第一个按钮在某种程度上发生冲突，但我不知道为什么以及如何修复它。

这些是一些代码片段：

后退按钮.vue

<template>
    <div>
        <button @click.stop="navigate()"/>
    </div>
</template>
    
<script>
    
    export default {
        name: 'BackButton',
        methods: {
            navigate(){
                console.log("B");
            }
        }
    }
</script>

完成按钮.vue

<template>
    <div :style="visible ? { 'display': 'inline-flex' } : { 'display': 'none' }">
        <button @click.stop="navigate()"/>
    </div>
</template>
    
<script>
 
    export default {
        name: 'FinishButton',
        props : {
            visible: Boolean
        },
        methods: {
            navigate(){
                console.log("F");
            }
        }
    }
</script>

Page.vue

<template>
    <BackButton/>
    <FinishButton :visible=ready></FinishButton>
</template>

<script>

import BackButton from "../components/BackButton.vue"
import FinishButton from "../components/FinishButton.vue"

export default {
    name: 'Page',
    components: {
        BackButton,
        FinishButton
    },
    data() {
        return {
            ready: true
        }
    },
}
</script>

如果页面上的ready为假（因此完成按钮不可见），则单击后退按钮会打印“ B”。如果 ready 为 true，finishbutton 会打印“F”，但单击backbutton 不会产生任何输出。

非常感谢您的帮助。