Artikel ini adalah tutorial yang lebih rinci dan komprehensif yang disusun oleh editor dalam kombinasi dengan dokumen resmi. Ini sangat bagus dan lebih cocok untuk dibaca oleh pemula.
Artikel ini berasal dari dokumen resmi:
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
Komunikasi komponen orangtua-anak
① Akses komponen anak, komponen induk, dan komponen root;
ini. $ Parent Access Parent Component
ini. $ anak -anak mengakses komponen anak (adalah array)
Ini. $ Root Keturunan instance root mengakses instance root
Kode contoh:
<Div id = "app"> komponen induk: <input v-model = "val"> <br/> komponen anak: <test: test = "val"> </test> </div> <script> var vm = vue baru ({el: '#app', data: {val: 1}, komponen: {test: {{findppar '= Test: @val: 1}, komponen: {test: {{' findpar ', @val: 1}, {{{{{{' findppar ', test: @val: {valppar: v-Model = 'test'/> ", Metode: {findParent: function () {console.log (this. $ parents); // mengakses komponen root console.log (this. $ parent.val); // akses komponen root console.log (ini. $ Parent. // Periksa apakah komponen induk dan komponen root adalah kongruen (karena komponen induknya adalah komponen root)}}}}}}); </script>Ketika tombol muncul di kotak input subkomponen, konten yang ditampilkan adalah:
Nilai kotak input komponen induk dan komponen induk (default adalah 1), 0 (menyatakan bahwa itu adalah elemen pertama dalam atribut anak dari komponen induk), dan benar (karena komponen induk adalah komponen akar, kongruen);
Dengan cara ini, interaksi dapat dilakukan di pohon komponen.
② Acara Kustom:
Pertama -tama, peristiwa perlu ditempatkan di properti acara daripada di properti metode (kesalahan yang cenderung dilakukan oleh para pemula). Mereka hanya dapat memicu peristiwa di properti acara, sementara peristiwa dalam metode properti tidak dapat dipicu.
Kedua, ada perbedaan antara distribusi ke atas dan siaran ke bawah: distribusi ke atas akan memicu peristiwa dengan nama yang sama, sementara siaran ke bawah tidak akan;
Ketiga, distribusi ke atas dan penyiaran ke bawah hanya akan memicu acara untuk jalur langsung (anak -anak atau orang tua, tidak termasuk leluhur dan cucu) secara default, dan akan melanjutkan pada baris ini kecuali nilai pengembalian acara benar.
Keempat, acara tersebut tidak dapat disebut secara eksplisit melalui ini. Nama Acara.
Kode contoh:
<Div id = "app"> komponen induk: <tombol @click = "ParentClick"> Klik untuk menyebarkan siaran ke bawah </aton> <br/> Komponen anak 1: <dildren1> </diles1> <br/> komponen anak lain 1: <-children1> </ding-children1> </div> <script> var var vm = {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{'#/{{lain. ParentClick () {This. $ Broadcast ("ParentClick", "ABC"); nilai dan tidak akan terus menjadi alat peraga yang didistribusikan: ['tes'], template: "<button> anak-anak1 </button> </br> subkomponen 2: <n children2> </diles2>", peristiwa: {childrenclick: function () {console.log ("Childrenclick-Children1"); Console.log ("ParentClick-Children1"); {Childrenclick: function () {Console.log ("Childrenclick-Children2"); Ini akan terus mendistribusikan alat peraga ke komponen anak dari komponen anak: ['tes'], template: "<butt> cewektan lain </butt> </br> Komponen anak lain 2: <-function2-children2> </lagus lain, {childrenclick: fungsi () {console.log (" (msg) {console.log ("ParentClick-anotherchildren1"); ini. Dispatch ('Childrenclick'); }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}menjelaskan:
【1】 Klik tombol komponen induk, dan itu akan disiarkan ke bawah, dan kemudian memicu komponen anak 1 itu sendiri, komponen anak lain 1, dan komponen anak lain 2;
【2】 Mengklik tombol komponen anak 2 akan memicu peristiwa komponen anak 2 dan peristiwa komponen anak 1, tetapi tidak akan memicu tombol komponen induk;
【3】 Mengklik tombol komponen anak lain 2 akan memicu peristiwa komponen anak lain 2, peristiwa komponen anak lain 1 dan peristiwa komponen induk (karena nilai pengembalian dari peristiwa komponen anak lain 1 adalah benar);
③ Gunakan V-on untuk mengikat acara khusus:
[1] Sederhananya, ketika komponen anak memicu suatu peristiwa (metode dalam peristiwa), komponen induk juga akan menjalankan metode (metode dalam metode komponen induk).
[2] Ikatan yang dipicu ditulis dalam templat (yaitu, templat templat yang diganti). Beberapa komponen anak dapat mengikat metode komponen induk, atau komponen anak yang berbeda dapat mengikat metode komponen induk yang berbeda, tetapi peristiwa komponen anak yang sama tidak dapat mengikat metode.
【3】 Komponen anak mengirim parameter untuk lewat pesan. Bahkan jika peristiwa komponen anak tidak memiliki parameter, itu tidak mempengaruhi metode untuk meneruskan parameter ke komponen induk (yaitu, metode komponen induk dapat menerima parameter yang diperoleh dengan metode komponen anak)
Sebagai contoh:
<Div ID = "App"> Komponen induk: <button> Klik untuk menyebarkan siaran </button> <br/> Komponen anak 1: <!-Binding ditulis di sini. Multiple bindings can be bound to the same one, or different bindings are different, but multiple cannot be bound to one--> <children v-on:test="parent" @test2="another"></children> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, methods: { parent: function (arg) { console.log(arg); console.log("the first method with test event"); }, another: function () { console.log("another method"); } }, components: { children: { //This has no return value and will not continue to be distributed props: ['test'], template: "<button @click='childClick'>children1</button></br><button @click='childClick2'>children1</button>", methods: { function () {this. $ emit ("test", 'argumen untuk pengiriman'); }); </script>④ Indeks subkomponen
Sederhananya: Anda dapat secara langsung mendapatkan subkomponen dari indeks, dan kemudian Anda dapat memanggil metode setiap subkomponen.
Metode untuk menambahkan indeks adalah: Tambahkan V-REF ke tag: Nama indeks
Metode memanggil komponen adalah: VM. $ Ref. Nama Indeks
Anda juga dapat menggunakan ini. $ Ref. Nama indeks langsung di komponen induk
Pada saat ini, Anda dapat memperoleh komponen, dan kemudian komponen dapat memanggil metodenya atau menggunakan datanya.
Kode contoh:
<Div ID = "App"> Komponen induk: <tombol @click = "TODO"> Acara yang memicu komponen anak </button> <br/> subkomponen 1: <!-Binding ditulis di sini. Binding berganda dapat terikat pada yang sama, atau ikatan yang berbeda berbeda, tetapi beberapa tidak dapat terikat pada satu-> <anak-anak v-ref: child> </children> </div> <script> var vm = new vue ({el: '#app', {todo: function () {this. $ Refs.child.fromparent ();/{function () {this. $ Refs.child.fromparent ();/{function () {this. $ Refs.child.fromparent (); Anak -anak: {// Ini tidak memiliki nilai pengembalian dan tidak akan terus mendistribusikan props: ['test'], template: "<button> anak -anak1 </buttper>", metode: {fromparent: function () {console.log ("wappened fromparent oleh ref"); </script>Di atas adalah VUEJS Pasal ke-10 Komunikasi Komponen Orangtua-Anak Vuejs yang diperkenalkan kepada Anda. 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!