Bagaimana untuk menghantar data merentasi komponen dalam Vue? Analisis ringkas kaedah Prop

Dalam Vue, kita selalunya perlu menghantar data antara komponen yang berbeza. Komponen ini boleh menjadi komponen ibu bapa-anak, adik-beradik, atau komponen di mana-mana peringkat. Vue menyediakan pelbagai cara untuk menyelesaikan masalah ini, seperti Prop, Bas Acara dan Vuex. Artikel ini akan memperkenalkan salah satu kaedah Vue untuk menghantar data merentasi komponen - Prop.

Prop

Prop ialah cara untuk komponen induk menghantar data kepada komponen anak. Dalam Vue, kita boleh menggunakan pilihan Props untuk menentukan sifat bagi subkomponen untuk menerima data. Sifat ini boleh berupa sebarang jenis JavaScript, seperti rentetan, nombor, objek, tatasusunan, dsb. Dalam komponen induk, kita boleh menggunakan arahan v-bind untuk mengikat ungkapan JavaScript pada atribut prop komponen anak.

Mari lihat contoh untuk memahami cara menghantar data menggunakan Props. Katakan kita mempunyai komponen induk Induk dan komponen anak Induk perlu memberikan nama kepada komponen Anak. Kami boleh mentakrifkan subkomponen dengan cara berikut:

Vue.component('child', {
  // 声明 props
  props: ['name'],
  template: '<div>{{ name }}</div>'
})

Dalam subkomponen ini, kami mengisytiharkan atribut props yang dipanggil nama, yang digunakan untuk menerima data daripada komponen induk. Dalam templat komponen kanak-kanak, kami boleh mengeluarkan data ini melalui {{ nama }}.

Seterusnya, kami merujuk komponen anak ini dalam komponen induk dan menghantar data:

<child name="Tom"></child>

Dalam contoh ini, kami menggunakan arahan v-bind untuk mengikat JavaScript bernama Tom The expression terikat pada harta prop komponen kanak-kanak. Komponen anak akan menerima data ini dan mengeluarkan Tom.

Sudah tentu, kita juga boleh menggunakan data komponen induk untuk menghantar nilai. Contohnya:

<child :name="msg"></child>

Dalam contoh ini, kami menghantar nilai atribut msg dalam komponen induk kepada atribut nama komponen anak.

Selain itu, kita juga boleh menggunakan sintaks trengkas bagi arahan v-bind untuk menghantar data:

<child :name="msg"></child>

Tanda bertindih (:) di sini adalah bersamaan dengan arahan v-bind.

Ringkasan

Dalam Vue, kami boleh menggunakan Prop untuk menghantar data merentas komponen. Proses ini memerlukan penentuan atribut props bagi subkomponen dan menggunakan arahan v-bind untuk mengikat ungkapan JavaScript kepada atribut props subkomponen. Dengan cara ini, komponen kanak-kanak boleh menerima dan menggunakan data ini.

Atas ialah kandungan terperinci Bagaimana untuk menghantar data merentasi komponen dalam Vue? Analisis ringkas kaedah Prop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!