Cara membuat panggilan antara komponen vue

Vue ialah rangka kerja JavaScript yang sangat popular dalam pembangunan web moden, yang mana komponennya merupakan bahagian yang sangat penting. Dalam Vue, komponen boleh digunakan semula, dan komunikasi antara komponen juga merupakan masalah yang sering dihadapi dalam pembangunan. Artikel ini akan memperkenalkan isu komunikasi antara komponen Vue dan meneroka secara terperinci cara "membuat panggilan" antara komponen Vue.

1. Komunikasi antara komponen Vue

Dalam Vue, komunikasi antara komponen terbahagi terutamanya kepada dua cara: komunikasi komponen ibu bapa-anak dan komunikasi komponen bukan ibu bapa-anak.

1. Komunikasi komponen ibu bapa-anak

Dalam komponen Vue, komponen induk boleh menghantar data kepada komponen anak melalui prop.

Templat komponen induk:

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

Skrip komponen anak:

<script>
  export default {
    props: ['message']
  }
</script>

Cara komponen induk menghantar data kepada komponen anak adalah sangat mudah, cuma tambah atribut props pada teg komponen kanak-kanak , dan hanya tambahkan data pemindahan yang diperlukan oleh subkomponen.

Selepas menerima data yang diluluskan oleh komponen induk, komponen anak boleh menggunakan data ini dalam templat:

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

Menghantar data kepada komponen anak melalui prop ialah salah satu induk yang paling biasa digunakan -kaedah komunikasi kanak-kanak dalam Vue. Dalam amalan, kita juga mungkin perlu melaksanakan kaedah komponen induk atau memanipulasi data komponen induk. Dalam kes ini, peristiwa yang dipancarkan boleh digunakan untuk berkomunikasi antara komponen induk dan komponen anak.

Komponen induk:

<template>
  <div>
    <child @sendMsg="updateMessage"></child>
  </div>
</template>

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

Gunakan kaedah $emit untuk mencetuskan peristiwa sendMsg dalam komponen anak

<script>
  export default {
    methods: {
      sendMessage () {
        this.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

2. Komunikasi komponen bukan ibu bapa-anak

Dalam Vue, jika Jika komponen itu bukan hubungan ibu bapa-anak, komunikasi antara komponen boleh menggunakan bas acara yang disediakan secara rasmi oleh Vue.

Kaedah pelaksanaan khusus:

Buat fail eventBus.js baharu

import Vue from 'vue'

export const eventBus = new Vue()

Dalam komponen yang perlu berkomunikasi, import eventBus.js dan gunakan $emit untuk mencetuskan acara :

<script>
  import { eventBus } from './eventBus.js'

  export default {
    methods: {
      sendMessage () {
        eventBus.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

Menerima peristiwa:

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

<script>
  import { eventBus } from './eventBus.js'

  export default {
    data () {
      return {
        message: ''
      }
    },
    created () {
      eventBus.$on('sendMsg', (msg) => {
        this.message = msg
      })
    }
  }
</script>

Kaedah ini membenarkan komunikasi antara komponen yang berbeza, tetapi terdapat kelemahan tertentu: apabila aplikasinya sangat kompleks, sukar untuk mengesan pautan komunikasi antara komponen.

2. Kaedah komunikasi dan pilihan antara komponen

Semasa proses pembangunan aplikasi, adalah perlu untuk memilih kaedah komunikasi yang sesuai untuk aplikasi untuk meningkatkan kecekapan dan prestasi pembangunan.

1. Komunikasi komponen ibu bapa-anak

sesuai untuk situasi di mana komponen ibu bapa-anak perlu memindahkan data atau menjalankan operasi. Kaedah ini agak mudah dan mudah diselenggara dan nyahpepijat.

2. Komunikasi komponen bukan ibu bapa-anak

Terpakai kepada situasi di mana komunikasi diperlukan antara peringkat silang, adik-beradik dan komponen bukan ibu bapa-anak yang lain. Menggunakan kaedah bas acara hanya boleh melaksanakan komunikasi antara komponen, tetapi ia boleh menyebabkan kesukaran dalam penyahpepijatan dan peningkatan kerumitan dengan mudah.

3.Vuex

Vuex ialah perpustakaan pengurusan negeri yang disediakan secara rasmi oleh Vue, yang digunakan untuk mengurus keadaan (termasuk data dan operasi) dalam aplikasi. Sesuai untuk projek yang lebih besar apabila sejumlah besar data perlu dikongsi.

Menggunakan Vuex, anda boleh meletakkan komunikasi antara komponen ke dalam stor Vuex, dan kemudian biarkan komponen yang diperlukan mendapatkan data dalam stor melalui getter atau menggunakan tindakan untuk mencetuskan perubahan keadaan dalam stor, mengemas kini data dalam kedai, dan kemudian Beritahu komponen lain.

Ringkasan:

Dalam pembangunan Vue, masalah komunikasi antara komponen adalah masalah biasa Kita boleh memilih komunikasi komponen ibu bapa-anak, komunikasi komponen bukan ibu bapa-anak, dan status Vuex mengikut keadaan sebenar. Penggunaan kaedah ini dengan betul boleh meningkatkan kecekapan dan prestasi pembangunan aplikasi.

Atas ialah kandungan terperinci Cara membuat panggilan antara komponen vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!