Artikel ini berasal dari dokumen resmi:
http://cn.vuejs.org/guide/components.html#props
Tutorial ini adalah tutorial yang lebih rinci dan lebih komprehensif yang disusun oleh editor dalam kombinasi dengan dokumen resmi, yang sangat cocok untuk dibaca oleh pemula.
Pengiriman data alat peraga
①Scope of Component Instances:
Ini terisolasi, dan sederhananya, nilainya tidak dibagi antara komponen, bahkan jika ada atribut dengan nama yang sama.
<Div id = "app"> <dild> </dld> <del> </del> </div> <script> var vm = new vue ({el: '#App', komponen: {"add": {template: "<buton> btn: {{{btn}} </tombol </button>", function: function () {{{{btn} {"{btn {Btn {btn {btn {btn, {template: "<button> btn: {{btn}} </button>", data: function () {return {btn: "456"}; </script>Hasil rendering adalah:
2 tombol, yang pertama memiliki nilai 123 dan yang kedua memiliki nilai 456 (meskipun keduanya BTN)
② Gunakan alat peraga untuk mengikat data statis:
[1] Metode ini digunakan untuk melewati string, dan nilainya ditulis pada elemen khusus komponen induk.
【2】 Contoh berikut tidak dapat melewati nilai dalam atribut data komponen induk
【3】 Ini akan menimpa nilai dengan nama yang sama dalam atribut data templat.
Kode contoh:
<div id = "app"> <add btn = "h"> </dld> </div> <script> var vm = new vue ({el: '#App', data: {h: "hello"}, komponen: {"add": {props: ['btn'], template: "<button> {{{{btn {{btn {{{{btn: {btn: "123"};}}}}); </script>Di bawah metode penulisan ini, nilai BTN adalah H, bukan 123, atau halo.
【4】 Metode Penulisan Unta
Jika interpolasi adalah unta,
Dalam tag HTML, karena karakteristik HTML tidak peka (seperti Li dan Li sama), nilai-nilai yang akan diteruskan dalam tag HTML harus ditulis sebagai garis horizontal pendek (seperti tes BTN) agar peka terhadap kasus.
Dalam array alat peraga, harus konsisten dengan interpolasi dan ditulis sebagai unta (seperti btntest).
Misalnya:
Props: ['btntest'], template: "<button> btn: {{btntest}} </button>",Tulisan yang benar:
<Tambahkan btn-test = "h"> </add>
Jika interpolasi ditulis dalam jenis garis horizontal pendek, atau tag HTML ditulis dalam gaya unta, itu tidak akan berlaku secara normal. (Kecuali interpolasi tidak ditulis sebagai luncur unta Batas case)
③Bind data dinamis menggunakan alat peraga:
Sederhananya, ini adalah untuk membuat interpolasi tertentu dari komponen anak yang konsisten dengan data komponen induk.
Cara standar untuk menulisnya adalah (menggunakan v-bind):
<Tambahkan V-Bind: Nilai komponen anak = "Properti komponen induk"> </dld>
Sebagai kode
<div id = "app"> <add v-bind: btn = "h"> </dld> </div> <script> var vm = new vue ({el: '#app', data: {h: "hello"}, komponen: {"add": {props: ['btn'], Template: "<" function ": {{Btn: {'btn' {{btn: () {return {'btn': "123"}; // Nilai nama yang sama dari komponen anak ditimpa}}}}); </script>menjelaskan:
【1】 Nilai H dalam data komponen induk yang digunakan oleh BTN;
【2】 Nilai pengembalian dalam fungsi data komponen anak ditimpa.
[3] Dengan kata lain, nilai komponen induk (berdasarkan nama atribut) digunakan, dan nilai label digunakan sebagai string.
【4】 Masih perlu menggunakan alat peraga, jika tidak ia akan menggunakan nilai BTN dalam datanya
Sintaksis Sintaksis dan Dinamis:
[1] Sederhananya, jika Anda tidak menambahkan V-bind, Anda melewati jumlah literal, yaitu, Anda diperlakukan sebagai string (misalnya, 1 juga merupakan string, bukan jenis angka);
【2】 Tambahkan V-Bind, ekspresi JS dilewatkan (sehingga nilai komponen induk dapat dilewati);
【3】 Setelah menambahkan V-bind, jika nilai komponen induk dapat ditemukan, maka nilai komponen induk digunakan; Jika tidak ada yang sesuai, itu dianggap sebagai ekspresi JS (misalnya, 1+2 dianggap 3, {a: 1} dianggap sebagai objek);
Sebagai kode:
<Div id = "app"> <add v-bind: btn = "1+2"> </dld> </div> <script> var vm = vue baru ({el: '#app', data: {h: "hello"}, komponen: {"add": {props: ['btn'], Template: "{" add ": {props: ['btn'], Template:" }}); </script>Nilai BTN di sini adalah 3 (bukan 1+2 sebagai string tanpa menambahkan V-bind)
⑤Props Binding Type:
[1] Sederhananya, dibagi menjadi dua jenis, yaitu ikatan satu arah (komponen induk dapat mempengaruhi komponen anak, tetapi yang sebaliknya tidak dimungkinkan) dan pengikatan dua arah (komponen anak juga dapat mempengaruhi komponen induk);
【2】 Contoh ikatan satu arah: (default, atau gunakan .once)
<div id="app"> Parent component: <input v-model="val"><br/> Child component: <test v-bind:test-Val="val"></test> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { "test": { props: ['testVal'], template: "<input V-Model = 'TestVal'/> "}}}); </script>menjelaskan:
Ketika nilai komponen induk diubah, nilai komponen anak juga berubah;
Ketika nilai komponen anak diubah, nilai komponen induk tidak akan berubah. Jika nilai komponen induk dimodifikasi lagi, komponen anak akan disinkronkan lagi.
Perlu juga dicatat bahwa jika komponen anak ingin terikat secara serempak, input komponen anak harus menjadi model-V, bukan atribut nilai (yang hanya bisa mengikat item tunggal, dan pengikatan akan hilang setelah memodifikasi nilai komponen anak)
【3】 Ikatan Bi-Way:
".sync" diperlukan sebagai pengubah
Sebagai contoh:
<Div id = "app"> komponen induk: <input v-model = "val"> <br/> komponen anak: <test: test.sync = "val"> </dest> </div> <script> var vm = vue baru ({el: '#app', data: {val: 1}, komponen: {{{el: '#app', {val: 1}, {{{{{{{": {1 {{{{{{": v-Model = 'test'/> "}}}); </script>Efeknya adalah bahwa nilai mana pun yang Anda ubah, yang lain akan berubah sesuai.
【4】 Verifikasi Props:
Sederhananya, ketika komponen memperoleh data, digunakan untuk verifikasi, dan hanya akan digunakan jika kondisinya memenuhi.
Metode penulisan adalah untuk mengubah alat peraga menjadi suatu objek, nilai yang diverifikasi adalah kunci objek, dan kondisi verifikasi adalah nilai yang sesuai dengan kunci.
Misalnya:
Props: {test: {twoway: true}},Verifikasi bahwa variabel uji terikat dua arah, dan jika tidak, kesalahan akan dilaporkan. (Perhatikan bahwa ini tidak dapat digunakan untuk memverifikasi ikatan satu arah).
Kode sampel adalah sebagai berikut:
<Div id = "app"> komponen induk: <input v-model = "val"> <br/> komponen anak: <test: test = "val"> </test> </div> <script> var vm = new vue ({el: '#App', data: {val: 1}, komponen: {{{{: {{{{test: {{{{{{test: {{{{test: {{{{{{{test: {{{{{{{{{{{{: {{{{{{{: v-Model = 'test'/> "}}}); </script>Untuk jenis verifikasi lebih lanjut, silakan lihat tutorial resmi:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
Di atas adalah penjelasan terperinci tentang ruang lingkup komponen dan contoh transfer data props dari artikel kesembilan Vuejs yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!