vue.js 中衝突的事件處理程序

Question

我有一個包含兩個按鈕的頁面。我想使用這兩個按鈕導航到不同的頁面。

如果我只包含其中一個按鈕，它就可以正常工作。如果我只包含一個作品（正如我將用偵錯語句顯示的那樣，如果第二個按鈕存在，則不會觸發第一個按鈕的事件處理程序）。

我的猜測是，第二個按鈕與第一個按鈕在某種程度上發生衝突，但我不知道為什麼以及如何修復它。

這些是一些程式碼片段：

後退按鈕.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 不會產生任何輸出。

非常感謝您的幫忙。

Answer 1

您的程式碼存在一些小問題，但以下程式碼運作良好（不確定這到底來自哪裡）。

Page.vue

#

<template>
  <div>
    <BackButton></BackButton>
    <FinishButton :visible="ready"></FinishButton>
  </div>
</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>

BackButton.vue

<template>
  <div>
    <button @click.stop="navigate">back</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">finish</button>
  </div>
</template>

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

---

或至少，我無法使用提供的程式碼片段重現您的問題。