Penjelasan terperinci tentang teknologi komunikasi komponen dalam Vue

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular hari ini. Ia memberikan kami kaedah pembangunan berasaskan komponen yang sangat berkuasa yang boleh meningkatkan kecekapan pembangunan kami. Dalam pembangunan berasaskan komponen Vue, pemprosesan komunikasi antara komponen adalah sangat penting. Artikel ini akan memberikan pengenalan terperinci kepada teknologi komunikasi komponen dalam Vue.

1. Komponen induk menghantar data kepada komponen anak

Dalam Vue, komponen induk menghantar data kepada komponen anak menggunakan atribut props. Terima data yang diluluskan oleh komponen induk melalui atribut props dalam komponen anak.

Kod komponen induk:

<template>
  <div>
    <child-component :msg="msg"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

Kod komponen anak:

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String,
        required: true
      }
    }
  }
</script>

Di sini data dihantar dengan menggunakan tag komponen anak dalam komponen induk, dan komponen anak menggunakan atribut props untuk menerima data yang diluluskan oleh komponen induk untuk dilengkapkan pemindahan data tersebut.

2. Subkomponen menghantar data kepada komponen induk

Subkomponen menghantar data kepada komponen induk menggunakan peristiwa tersuai dan kaedah $emit.

Kod subkomponen:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('send-message', 'Hello Parent!')
      }
    }
  }
</script>

Di sini dengan mentakrifkan kaedah, gunakan kaedah $emit untuk lulus acara tersuai dan data yang perlu dihantar.

Kod komponen induk:

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
    <div>{{ message }}</div>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      receiveMessage(msg) {
        this.message = msg
      }
    }
  }
</script>

Di sini, gunakan teg komponen anak dalam komponen induk untuk mendengar acara tersuai yang dihantar oleh komponen anak dan gunakan kaedah receiveMessage untuk menerima mesej yang diluluskan oleh komponen anak.

3. Komunikasi antara komponen adik-beradik

Dalam komunikasi antara komponen adik-beradik, kerana mereka tidak mempunyai hubungan ibu bapa-anak, mereka tidak boleh secara langsung menggunakan kaedah props dan $emit untuk berkomunikasi seperti komunikasi antara komponen ibu bapa-anak yang anda perlukan untuk menggunakan Vue satu lagi kaedah komunikasi: bas acara.

Bas acara ialah contoh Vue tersuai yang digunakan untuk komunikasi antara komponen adik-beradik. Dalam satu komponen, kita boleh menggunakan kaedah $emit untuk menghantar acara tersuai ke bas acara, dan komponen lain boleh mendengar dan menerima acara melalui kaedah $on.

Kod bas acara:

import Vue from 'vue'
export default new Vue();

Di sini bas acara dicipta melalui fail berasingan.

Kod Komponen A:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('send-message', 'Hello B!')
      }
    }
  }
</script>

Di sini untuk menghantar mesej dalam komponen A, gunakan kaedah EventBus.$emit untuk menghantar acara tersuai ke bas acara.

Kod Komponen B:

<template>
  <div>{{ message }}</div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      EventBus.$on('send-message', msg => {
        this.message = msg
      })
    }
  }
</script>

Di sini, dengar bas acara dalam komponen B dan gunakan kaedah EventBus.$on untuk menerima mesej yang dihantar oleh komponen A.

4. Komunikasi komponen merentas peringkat

Dalam komunikasi komponen merentas peringkat, kami boleh menggunakan kaedah sediakan/suntik yang disediakan dalam Vue. Kaedah menyediakan/menyuntik boleh menghantar data kepada komponen turunan di mana-mana peringkat. Kaedah

provide akan menyediakan objek data kepada komponen keturunan, dan kaedah suntikan akan menyuntik objek data ini ke dalam komponen keturunan.

Kod komponen induk:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    provide() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

Di sini, kaedah menyediakan digunakan dalam komponen induk untuk menyediakan mesej objek data secara dalaman.

Kod komponen anak:

<template>
  <div>{{ value }}</div>
</template>

<script>
  export default {
    inject: ['message'],
    computed: {
      value() {
        return this.message
      }
    }
  }
</script>

Di sini, gunakan kaedah suntikan dalam komponen anak untuk menyuntik objek data yang disediakan oleh komponen induk, dan kemudian gunakan objek data ini.

Ringkasan

Di atas ialah pengenalan terperinci kepada komunikasi komponen dalam Vue. Apabila kita perlu berinteraksi dengan data antara komponen semasa proses pembangunan, teknologi di atas dapat menyelesaikan masalah ini dengan baik. Kita perlu memilih cara yang paling sesuai untuk melaksanakan komunikasi antara komponen mengikut situasi tertentu untuk mencapai kesan pembangunan yang optimum.

Atas ialah kandungan terperinci Penjelasan terperinci tentang teknologi komunikasi komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!