Cara berkomunikasi merentas komponen dalam vue

Dalam Vue.js, komunikasi merentas komponen boleh dicapai dengan cara berikut: Komunikasi ibu bapa-anak: menghantar data atau peristiwa yang mencetuskan melalui prop. Komunikasi keturunan nenek moyang: berkongsi sumber data melalui menyediakan/menyuntik. Komunikasi komponen adik beradik: melalui bas acara, pengurusan negeri Vuex atau acara tersuai.

Bagaimana untuk berkomunikasi merentas komponen dalam Vue?

Pengenalan:
Dalam aplikasi Vue.js, komunikasi merentas komponen adalah penting untuk berkongsi data dan acara. Berikut ialah beberapa cara untuk mencapai komunikasi merentas komponen:

Komunikasi ibu bapa-anak:

• Menghantar data melalui sifat: Komponen induk menghantar data sebagai prop kepada komponen anak, dan komponen anak menggunakan v-bind kepada mengikat data.
• Dicetuskan oleh peristiwa: Komponen anak mencetuskan peristiwa dan menghantar data kepada komponen induk Komponen induk mendengar peristiwa dalam templat komponen induk.

Komunikasi keturunan nenek moyang:

• Melalui menyediakan/menyuntik: Komponen nenek moyang menyediakan sumber data, dan komponen keturunan memperoleh data melalui suntikan.

Komunikasi komponen kakak:

• Melalui Bas Acara: Buat contoh Vue untuk bertindak sebagai bas acara, dan semua komponen boleh mendengar dan mencetuskan acara.
• Pengurusan negeri melalui Vuex: Gunakan perpustakaan pengurusan negeri Vuex untuk menyimpan keadaan global dan menjadikannya boleh diakses oleh semua komponen.

Acara tersuai:

• Melalui $emit/$on: Cetuskan acara tersuai melalui $emit dalam komponen anak, dan dengar acara melalui $on dalam komponen induk.

Contoh hantaran atribut:

<!-- 父组件 -->
<template>
  <Child-Component :message="message" />
</template>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

Contoh pencetus mengikut peristiwa:

<!-- 子组件 -->
<template>
  <button @click="emitMessage">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', '事件数据');
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <Child-Component @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 输出：事件数据
    }
  }
};
</script>

Atas ialah kandungan terperinci Cara berkomunikasi merentas komponen dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!