Apa itu komponen?
Komponen adalah salah satu fitur paling kuat dari Vue.Js. Komponen dapat memperluas elemen HTML dan merangkum kode yang dapat digunakan kembali. Pada tingkat yang lebih tinggi, komponen adalah elemen khusus, dan kompiler Vue.js menambahkan fitur khusus. Dalam beberapa kasus, komponen juga dapat dalam bentuk elemen HTML asli, diperluas dengan fitur IS.
Konten distribusi slot
① Ikhtisar:
Sederhananya, jika komponen induk perlu menempatkan beberapa DOM di komponen anak, maka DOM ini ditampilkan, tidak ditampilkan, di mana mereka ditampilkan, dan bagaimana mereka ditampilkan, yang merupakan tanggung jawab distribusi slot.
② secara default
Isi komponen induk yang tertutup di dalam komponen anak tidak ditampilkan.
Misalnya kode:
<Div id = "app"> <dildren> <span> 12345 </span> <!-baris di atas tidak akan ditampilkan-> </anak-anak> </div> <script> var vm = vue baru ({el: '#app', tag: {anak-anak: {// ini tidak memiliki nilai pengembalian, dan template tidak akan terus distributor ke distributor: " }}}); </script>Konten tampilan adalah tombol tombol, yang tidak berisi konten dalam tag rentang;
Slot ③Single
Sederhananya, jika Anda hanya menggunakan tag ini, Anda dapat menempatkan komponen induk dalam konten komponen anak dan menempatkannya ingin ditampilkan.
<Div id = "app"> <dildren> <span> 12345 </span> <!-baris di atas tidak akan ditampilkan-> </dilds> </div> <ript> var vm = vue baru ({el: '#app', komponen: {anak-anak: {// ini tidak memiliki nilai pengembalian, dan template tidak akan terus distributorkan: Tindakan, gunakan tag tombol </button> "}}}); </script>Misalnya, jika Anda menulis ini, hasilnya adalah:
<button> <span> 12345 </span> Untuk mengklarifikasi ruang lingkup tindakan, gunakan tag tombol </button>
Artinya, isi komponen induk yang ditempatkan dalam komponen anak dimasukkan ke dalam posisi </slot> </slot> dari komponen anak;
Perhatikan bahwa bahkan jika ada beberapa tag, mereka akan dimasukkan bersama, yang setara dengan mengganti tag <slot> </slot> dengan tag yang ditempatkan di komponen anak.
④ Slot bernama
Letakkan berbagai tag HTML yang ditempatkan di subkomponen di lokasi yang berbeda
Komponen induk menambahkan atribut slot = "name" ke tag yang akan didistribusikan
Komponen anak menambahkan name = "name name" atribut di tag slot dari lokasi distribusi yang sesuai, dan kemudian meletakkan tag yang sesuai di lokasi yang sesuai.
Kode contoh:
<Div id = "app"> <dils> <span slot = "first"> 12345 </span> <span slot = "detik"> 56789 </span> <!-baris di atas tidak akan ditampilkan-> </anak-anak tidak akan ada </div> var vm = vue baru ({el: '#app', components: {{{{{{{{{{{no {{noP ', components: {components: {{{{{{{{{{{{no {noP', components: Terdistribusi: "<button> <slot name = 'first'> </slot> Untuk memperjelas ruang lingkup tindakan, <name slot = 'kedua'> </slot> jadi gunakan tag tombol </atton>"}}}); </script>Hasilnya ditampilkan sebagai: (untuk kenyamanan menonton, jeda garis telah disesuaikan secara manual)
<buton> <span slot = "first"> 12345 </span> Untuk mengklarifikasi ruang lingkup tindakan, <span slot = "kedua"> 56789 </span> jadi gunakan tag tombol </button>
⑤Scope of Distribution Content:
Ruang lingkup konten yang didistribusikan ditentukan berdasarkan templat di mana ia berada. Sebagai contoh, tag di atas dikendalikan oleh templat komponen induk (meskipun disertakan oleh tag anak dari komponen anak, tetapi karena tidak ada dalam atribut template komponen anak, itu bukan milik komponen anak), dikendalikan oleh komponen induk.
Kode contoh:
<Div id = "app"> <dilds> <span slot = "first" @click = "TobEknow"> 12345 </span> <span slot = "kedua"> 56789 </span> <!-Baris di atas tidak akan ditampilkan-> </anak-anak> </div> <script> var vm = new vue (oL: '#apping', ') () </div> <script> var vm = new vue (oL:' #App ',') () {) {) {) {function: {) </diver: {) </Diver: {) </Diver: {) </Diver: {) </Diver: {) </Diver: {) </Diver: {) </Diver: {) </diver: {{) </Diver: {) </Diver: adalah metode orang tua ");}}, komponen: {anak -anak: {// Ini tidak memiliki nilai pengembalian, dan template tidak akan terus didistribusikan:" <button> <name slot = 'pertama'> </slot> untuk mengklarifikasi ruang lingkup tindakan, <lot name = 'kedua'> </slot> jadi gunakan tag tombol </ </script>Ketika area teks 12345 diklik (bukan tombol semua), metode Tobeknow dari komponen induk dipicu.
Tetapi saat mengklik area lain, tidak ada efeknya.
Tutorial resmi mengatakan ini:
Konten template komponen induk dikompilasi dalam ruang lingkup komponen induk; Isi Template Komponen Anak dikompilasi dalam ruang lingkup komponen anak
⑥ Tips Saat tidak ada konten yang didistribusikan:
Jika komponen induk tidak menempatkan tag di komponen anak, atau komponen induk menempatkan tag di komponen anak, tetapi memiliki atribut slot, dan komponen anak tidak memiliki tag untuk atribut slot.
Kemudian, tag slot komponen anak tidak akan memainkan peran apa pun.
Kecuali ada konten dalam tag slot, konten dalam tag slot akan ditampilkan ketika tidak ada konten yang didistribusikan.
Seperti pada kode contoh:
<div id="app"> <children> <span slot="first">【12345】</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be distributed: "<div><slot Name = 'First'> <butt> 【Jika tidak ada konten, itu akan menunjukkan kepada saya 1】 </button> </slot> untuk mengklarifikasi ruang lingkup tindakan, <slot name = 'last'> <button> 【Jika tidak ada konten, itu akan menunjukkan kepada saya 2】 </button> </slot> jadi gunakan tombol tag </div>}}}}}}}}; </script>menjelaskan:
【1】 Tag slot dengan nama = 'pertama' digantikan oleh tag yang sesuai dengan komponen induk (konten di dalam tag slot dibuang);
【2】 Tag slot nama = 'terakhir', karena tidak ada konten yang sesuai, konten di dalam tag slot akan ditampilkan.
⑦ Jika Anda ingin mengontrol sifat -sifat tag root dari subkomponen
[1] Pertama -tama, karena tag templat milik komponen induk, tidak mungkin untuk mengikat instruksi komponen anak ke tag template (karena itu milik komponen induk);
[2] Jika Anda perlu mengontrol apakah komponen anak ditampilkan (seperti V-IF atau V-Show) melalui komponen induk, maka arahan ini jelas milik komponen induk (seperti ditempatkan di bawah data komponen induk). Tag dapat ditulis pada template komponen anak.
Sebagai kode:
<Div id = "app"> <button @click = "toshow"> Klik untuk membiarkan komponen anak menampilkan </button> <anak-anak v-jika = "abc"> </dils> </div> <script> var vm = new vue ({el: '#app', data: {abc: false}, metode: {toshow: function () {{this. {// Ini tidak memiliki nilai pengembalian, template: "<div> Ini adalah komponen anak </div>"}}}); </script>menjelaskan:
Kontrol Apakah komponen anak ditampilkan melalui komponen induk (klik tombol untuk mengubah nilai instruksi V-IF).
[3] Jika Anda perlu mengontrol apakah komponen anak ditampilkan (misalnya, biarkan sembunyi), maka instruksi ini jelas milik komponen anak (nilainya akan ditempatkan di bawah atribut data komponen anak), maka tidak dapat ditulis seperti di atas, tetapi harus ditempatkan di label akar komponen anak.
<Div id = "app"> <button @click = "toshow"> Klik untuk membiarkan komponen anak menampilkan </button> <dils> <span slot = "first"> 【12345】 </span> <!-Baris di atas tidak akan ditampilkan-> </anak-anak> </div> <script> var vm = function new vue (ed: '#apping' #apping ' ini. $ Children [0] .tohidden = true;}}, komponen: {anak-anak: {// Ini tidak memiliki nilai pengembalian, dan template tidak akan terus didistribusikan: "<Div v-if = 'toHidden' @click = 'toHide'> Ini adalah komponen anak </div>", data: function () {{{{{{{{{{function) {{{{{{{{) this.toHidden =! This.toHidden; </script>menjelaskan:
Mengklik pada komponen anak akan membuat komponen anak menghilang;
Klik tombol komponen induk untuk menampilkan kembali komponen anak dengan mengubah properti TOHIDDEN dari komponen anak.
Instruksi komponen anak terikat pada template komponen anak (ini dapat disebut);
Di atas adalah penjelasan terperinci dari contoh distribusi konten slot dari komponen Vuejs ke -11 yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!