Cara menghantar parameter kepada komponen yang tidak berkaitan dalam Vue

Dalam Vue, komponen biasanya boleh menghantar data melalui atribut props, tetapi kadangkala kita perlu menghantar data antara komponen yang tidak berkaitan.

Sebagai contoh, kita mungkin perlu menghantar data daripada satu komponen ke komponen lain, tetapi kedua-dua komponen tersebut mungkin tidak mempunyai sebarang sambungan. Dalam kes ini, kami boleh menggunakan sistem acara Vue untuk melaksanakan komunikasi antara komponen bukan ibu bapa dan anak. Secara khusus, kita boleh menggunakan kaedah $on dan $emit dalam Vue untuk menghantar dan menerima acara.

Kaedah $on digunakan untuk mendaftarkan acara tersuai dalam komponen semasa Apabila peristiwa dicetuskan, komponen semasa boleh melakukan operasi yang sepadan. Kaedah $emit digunakan untuk mencetuskan peristiwa tersuai dan menghantar parameter yang ditentukan kepada semua komponen yang mendengar acara tersebut.

Contohnya adalah seperti berikut:

<!-- 组件A -->
<template>
  <div>
    <!-- 触发事件 -->
    <button @click="sendDataToB">传递数据给组件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>

Dalam contoh ini, kami mendaftarkan acara tersuai bernama "sendData" dalam komponen A dan menggunakan kaedah $emit untuk mencetuskan acara. Kaedah $emit akan menghantar rentetan "Ini adalah data daripada komponen A" sebagai parameter kepada semua komponen yang mendengar acara.

Dalam komponen B, kami menggunakan kaedah $on dalam cangkuk kitaran hayat yang dipasang untuk mendengar acara "sendData", dan mengemas kini data yang diterima bagi komponen B dalam fungsi tindak balas. Pada ketika ini, komponen B boleh menerima data yang dihantar daripada komponen A.

Perlu diingatkan bahawa komunikasi antara komponen bukan ibu bapa dan anak perlu dilaksanakan menggunakan sistem acara khusus Ini boleh mengelakkan anak patung matryoshka yang tidak berkesudahan antara komponen dan membuat kod sukar untuk dikekalkan. Oleh itu, dalam pembangunan sebenar, kita harus cuba mengehadkan komunikasi antara komponen kepada komponen ibu bapa-anak.

Atas ialah kandungan terperinci Cara menghantar parameter kepada komponen yang tidak berkaitan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!