Mula Pantas VUE3: Gunakan Props untuk menghantar data kepada subkomponen

VUE3 ialah versi Vue.js terbaharu, yang telah dipertingkatkan dari segi prestasi, pengalaman dan fleksibiliti. Dalam artikel ini, kami akan mempelajari cara menggunakan Props VUE3 untuk menghantar data kepada komponen kanak-kanak.

Vue.js ialah rangka kerja MVVM (Model-View-ViewModel), yang berdasarkan komponen Setiap komponen mempunyai keadaan setempat dan tindakan yang mungkin, jadi komunikasi antara komponen adalah penting. Dalam Vue.js, komponen induk boleh menghantar data kepada komponen anak melalui Props dan komponen anak menerima data dengan mendengar Props yang diluluskan ini.

Sebelum menggunakan Props untuk menghantar data kepada sub-komponen, kita perlu terlebih dahulu memahami sintaks komponen VUE3. Dalam VUE3, komponen boleh menentukan kelakuannya melalui fungsi persediaan(). Fungsi setup() mengembalikan objek yang mengandungi keadaan dan tingkah laku komponen.

Mari kita lihat kod berikut, iaitu komponen induk ringkas yang menghantar rentetan ringkas kepada komponen anak yang terkandung di dalamnya:

<template>
  <div>
    <child-component message="Hello World!"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

Dalam kod di atas, kami merujuk ChildComponent.vue , yang merupakan komponen anak kita. Dalam teg templat komponen induk, kami menghantar rentetan bernama mesej kepada komponen anak Kami akan melihat sifat ini dalam komponen anak tidak lama lagi.

Seterusnya, mari kita lihat kod ChildComponent.vue:

<template>
  <div>{{ childMessage }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const childMessage = props.message

    return {
      childMessage
    }
  }
}
</script>

Dalam kod di atas, kita melihat objek props. Props menyediakan cara yang mudah untuk menghantar data daripada komponen induk kepada komponen anak. Dalam komponen anak kami, kami mentakrifkan sifat yang dipanggil mesej, yang mestilah rentetan. Kami juga memaksa komponen induk untuk lulus atribut ini melalui pilihan yang diperlukan.

Dalam fungsi persediaan, kami lulus parameter bernama props, yang mengandungi semua Props. Kami menetapkan atribut mesej dalam prop kepada pembolehubah childMessage, dan kemudian kami mengembalikan objek yang mengandungi childMessage, yang merupakan sebahagian daripada keadaan komponen anak kami.

Akhir sekali, dalam templat kami, kami mengikat pembolehubah childMessage melalui sintaks pendakap kerinting berganda.

Ini ialah keseluruhan proses menggunakan Props untuk menghantar data kepada komponen anak. Sudah tentu, dalam aplikasi sebenar, mungkin terdapat pemindahan data dan kaedah rendering yang lebih kompleks, tetapi contoh di atas sudah cukup untuk menggambarkan penggunaan asas dan sintaks Props.

Ringkasan

Sangat mudah dan fleksibel untuk menggunakan fungsi Props dan setup() VUE3 untuk menghantar data kepada sub-komponen. Melalui Props, anda boleh menghantar rentetan ringkas, nombor, nilai Boolean, dsb., serta objek dan tatasusunan yang kompleks. Ini menjadikan komunikasi antara komponen mudah dan semula jadi, memperkemas aliran kerja.

Saya harap artikel ini akan membantu anda dan memberi anda pemahaman yang lebih mendalam tentang sintaks dan penggunaan komponen VUE3.

Atas ialah kandungan terperinci Mula Pantas VUE3: Gunakan Props untuk menghantar data kepada subkomponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!