Bagaimanakah komponen vue menerima nilai yang diluluskan oleh orang lain?

Vue ialah rangka kerja JavaScript yang sangat berkuasa yang menyediakan sistem komponen yang mudah difahami dan digunakan yang boleh membantu kami melaksanakan pembangunan web dengan lebih baik.

Dalam Vue, komponen boleh ditulis sebagai modul bebas yang boleh digunakan semula. Walau bagaimanapun, apabila membangunkan projek sebenar, kemungkinan besar data perlu dipindahkan antara berbilang komponen Dalam kes ini, data perlu dipindahkan antara komponen Vue.

Dalam Vue, pemindahan data antara komponen boleh dicapai melalui atribut props. Atribut props membenarkan komponen induk menghantar data kepada komponen anak untuk digunakan dalam templat mereka sendiri.

Apabila kami perlu menghantar data kepada komponen kanak-kanak, kami perlu mentakrifkan atribut props dalam komponen kanak-kanak terlebih dahulu, seperti yang ditunjukkan di bawah:

Vue.component('child-component', {
    props: ['msg'],
    template: '<div>{{msg}}</div>',
});

Di sini, kami mentakrifkan komponen kanak-kanak komponen kanak-kanak, yang mempunyai atribut props bernama msg. Pada masa ini, komponen induk boleh menghantar medan bernama msg kepada komponen anak, seperti yang ditunjukkan di bawah:

<child-component msg="Hello World!"></child-component>

Melalui atribut props ini, komponen anak boleh menerima data yang diluluskan oleh komponen induk dan menambah ia digunakan sendiri dalam templat.

Dalam komponen anak, kita boleh mengeluarkan data yang diluluskan oleh komponen induk melalui {{msg}}.

Selain itu, terdapat satu lagi cara untuk menghantar data kepada subkomponen, dan itu adalah dengan menggunakan arahan v-bind. Arahan v-bind boleh mengikat sifat secara dinamik kepada ungkapan, seperti ditunjukkan di bawah:

Vue.component('child-component', {
    props: ['msg'],
    template: '<div v-bind:title="msg">{{msg}}</div>',
});

Di sini, kami mentakrifkan komponen kanak-kanak, yang mempunyai atribut props bernama msg . Dalam templat subkomponen, kami menggunakan arahan v-bind untuk mengikat atribut msg kepada atribut tajuk, supaya atribut tajuk subkomponen boleh ditukar secara dinamik.

Dalam komponen induk, kita boleh mengikat data pada harta melalui arahan v-bind, seperti yang ditunjukkan di bawah:

<child-component v-bind:msg="message"></child-component>

Dengan arahan v-bind ini, kami mengikat induk Medan mesej atribut data dalam komponen terikat pada atribut msg komponen anak.

Ringkasnya, terdapat dua cara untuk menghantar data kepada subkomponen dalam Vue, satu ialah menggunakan atribut props untuk lulus, dan satu lagi ialah menggunakan arahan v-bind untuk lulus. Tidak kira kaedah yang digunakan, kami boleh mencapai pemindahan data antara komponen untuk pembangunan web yang lebih baik.

Atas ialah kandungan terperinci Bagaimanakah komponen vue menerima nilai yang diluluskan oleh orang lain?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!