vue不相干組件怎麼傳參

在Vue中，元件通常可以透過props屬性來傳遞數據，但是，有時候我們需要在不相干的元件之間傳遞數據。

例如，我們可能需要將一個元件的資料傳遞給另一個元件，但這兩個元件可能沒有任何關聯。在這種情況下，我們可以使用Vue的事件系統來實作非父子元件之間的通訊。具體來說，我們可以使用Vue中的$on和$emit方法來傳送和接收事件。

$on方法用於在目前元件中註冊自訂事件，當事件觸發時，目前元件可以執行對應的動作。 $emit方法用於觸發一個自訂事件，並將指定參數傳遞給所有監聽該事件的元件。

範例如下：

<!-- 组件A -->
<template>
  <div>
    <!-- 触发事件 -->
    <button>传递数据给组件B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToB() {
      // 发送事件
      this.$emit('sendData', '这是来自组件A的数据')
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <!-- 监听事件并接收数据 -->
    <div>收到的数据：{{ receivedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: ''
    }
  },
  mounted() {
    // 监听事件
    this.$on('sendData', (data) => {
      this.receivedData = data
    })
  }
}
</script>

在這個範例中，我們在元件A中註冊了一個名為「sendData」的自訂事件，並在其中使用$emit方法觸發該事件。 $emit方法會將「這是來自元件A的資料」的字串作為參數傳遞給所有監聽該事件的元件。

在元件B中，我們在mounted生命週期鉤子中使用$on方法監聽事件“sendData”，並在回應函數中更新元件B的資料receivedData。此時，組件B就可以接收從組件A傳遞過來的資料了。

要注意的是，非父子元件之間的通訊需要使用專門的事件系統來實現，這可以避免元件之間無限套娃而導致程式碼難以維護。因此，在實際開發中，我們應該盡量將元件之間的通訊限制在父子元件之間。

以上是vue不相干組件怎麼傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章！