Analisis ringkas tentang cara menghantar parameter kepada komponen adik-beradik ibu bapa dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna dan aplikasi satu halaman. Dalam Vue, komponen ialah blok binaan asas aplikasi, dan ia boleh digunakan semula dan digabungkan untuk membina aplikasi yang lebih besar. Dalam komponen Vue, anda mungkin perlu menghantar parameter kepada komponen saudara induknya Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi ini dalam Vue.

Apakah itu Vue?

Vue ialah rangka kerja ringan yang mudah digunakan, kod ringkas, berkuasa, mesra mudah alih, dsb. Dokumentasi rasmi Vue menyediakan set lengkap tutorial dan dokumentasi serta dokumentasi API untuk kegunaan mudah oleh pembangun. Selain itu, komunitinya sangat aktif, dan terdapat banyak rangka kerja lanjutan seperti Nuxt.js yang memberikan lebih banyak bantuan kepada pembangun.

Komponen Vue

Komponen Vue ialah blok binaan asas dalam aplikasi Vue. Komponen membenarkan pembangun membina komponen UI boleh guna semula dan menggabungkan komponen ini untuk membina aplikasi yang lebih besar. Komponen Vue dibina dari bawah ke atas, dengan komponen induk mengandungi komponen anak, yang mungkin mengandungi lebih banyak komponen anak, akhirnya menghasilkan aplikasi yang lengkap.

Dalam hubungan ibu bapa-anak ini, komponen induk boleh menghantar data kepada komponen anak melalui atribut props ialah sifat yang digunakan untuk menghantar data kepada komponen.

Komponen ibu bapa-anak

Dalam Vue, komunikasi antara komponen ibu bapa-anak adalah senario yang sangat biasa. Dalam pepohon komponen, komponen induk boleh menghantar data kepada komponen anak melalui prop, menjadikan aliran data antara komponen sangat mudah. Komponen induk boleh mempunyai beberapa data atau kaedah, dan komponen anak boleh diprogramkan berdasarkan data dan kaedah ini. Biasanya, komponen anak menerima data yang diluluskan oleh komponen induk melalui atribut props, dan kemudian menggunakan data ini untuk logik perniagaan mereka sendiri.

Komponen induk menggunakan atribut props untuk menghantar data kepada komponen anak dan komponen anak menggunakan kaedah $emit untuk menghantar data kepada komponen induk. Walau bagaimanapun, dalam sesetengah senario, tidak terdapat hubungan ibu bapa-anak secara langsung, tetapi hubungan saudara lelaki (seperti yang ditunjukkan dalam rajah di bawah, bas acara EventBus atau Vuex perlu digunakan untuk memindahkan data.

Komponen Adik Beradik

Dalam Vue, komunikasi antara komponen adik beradik memerlukan penggunaan bas acara pusat, EventBus. Bas acara ini ialah tika Vue yang boleh digunakan untuk menghantar dan mendengar acara. Dalam contoh Vue, kita boleh menggunakan kaedah $on untuk mendengar peristiwa dan kaedah $emit untuk mencetuskan peristiwa. Untuk komponen adik-beradik, kita perlu mengimport bas acara pusat ke dalam tetingkap sebagai pembolehubah global, mencetuskan peristiwa melalui kaedah $emit dalam komponen, dan kemudian mendengar acara melalui kaedah $on dalam komponen lain, dan akhirnya menjadi dapat menerima data penghantaran dengan betul.

Menggunakan bas acara untuk membina komunikasi antara komponen adik-beradik boleh menjadikan kod lebih jelas, dan tidak perlu menggunakan Vuex untuk mengurus keadaan, yang merupakan kaedah pelaksanaan yang agak mudah.

Pelaksanaan kod

Berikut ialah contoh penggunaan komunikasi bas acara pusat dalam Vue Andaikan terdapat dua komponen adik-beradik dan data perlu dipindahkan antara mereka:

<!-- 兄弟组件A -->
<template>
  <div>
    <button @click="sendMessage">发送数据</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        // 将数据作为参数传递给事件
        this.$bus.$emit('message', '这是一条来自兄弟组件A的消息')
      }
    }
  }
</script>

<!-- 兄弟组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      }
    },
    created() {
      // 监听事件，传递数据到message
      this.$bus.$on('message', (message) => {
        this.message = message
      })
    }
  }
</script>

<!-- 中央事件总线 -->
<script>
  import Vue from 'vue'
  export default new Vue()
</script>

Dalam kod, kami menggunakan contoh Vue sebagai bas acara pusat, menghantar data ke bas acara melalui kaedah sendMessage dalam komponen adik-beradik A, dan kemudian mendengar acara melalui kaedah cipta dalam komponen adik-beradik B dan tetapkan data yang diterima Memberi mesej yang berterusan. Akhir sekali, nilai pemalar ini dipaparkan dalam komponen adik-beradik B untuk merealisasikan pemindahan data antara komponen adik-beradik.

Ringkasan

Dalam Vue, pemindahan data antara bapa dan anak adalah sangat semula jadi dan langsung, tetapi pemindahan data antara adik-beradik memerlukan penggunaan bas acara atau Vuex. Ringkasnya, komunikasi antara komponen adik-beradik dalam Vue tidak sukar. Kami boleh menggunakan mekanisme bas acara Vue sendiri untuk mencapai pemindahan data dengan mudah. Pendekatan ini mudah dan mudah diselenggara, dan tidak memerlukan penggunaan perpustakaan atau rangka kerja yang berlebihan.

Atas ialah kandungan terperinci Analisis ringkas tentang cara menghantar parameter kepada komponen adik-beradik ibu bapa dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!