Informasi ini berasal dari dokumen resmi: http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Artikel ini didasarkan pada dokumentasi resmi, dengan penjelasan yang lebih rinci dan kode yang lebih lengkap.
Sederhananya, lebih cocok untuk dibaca oleh pemula
①S sederhana:
Ini berarti bahwa beberapa komponen ditempatkan di bawah titik pemasangan, dan kemudian mereka memutuskan mana yang akan ditampilkan berdasarkan variabel komponen induk, atau tidak ada yang ditampilkan.
② sakelar dinamis:
Gunakan tag komponen pada titik pemasangan dan kemudian gunakan v-bind: is = ”nama komponen” untuk secara otomatis menemukan nama komponen yang cocok. Jika tidak, itu tidak akan ditampilkan;
Untuk mengubah komponen yang dipasang, Anda hanya perlu memodifikasi nilai arahan IS.
Seperti pada kode contoh:
<Div id = "app"> <button @click = "toshow"> klik untuk membiarkan komponen child display </button> <component v-bind: is = "whot_to_show"> </component> </div> <script> var vm = var var = {el: '#app', data: {yang mana_to_show: "} first"} {{EL: #App ', data: {yang mana_to_show: "} first"} {{EL: {function {function: {function {function: {function: {{function: {function: {{function {function: {function: {function: [pertama "," kedua "," ketiga ","]; Komponen 1 </div> "}, kedua: {// Template komponen anak kedua:" <div> di sini adalah komponen anak 2 </div> "}, ketiga: {// Template komponen anak ketiga:" <div> Berikut adalah komponen anak 3 </div> "},}}); </skrip>menjelaskan:
Mengklik tombol komponen induk akan secara otomatis beralih untuk menampilkan komponen anak (ditentukan berdasarkan nilai variabel yang_to_show).
③ Tetap hidup
Sederhananya, komponen yang telah diaktifkan (tidak ditampilkan saat ini) secara langsung dihapus.
Melihat ini. $ Atribut anak -anak dalam komponen induk, Anda dapat menemukan bahwa ketika komponen anak ada, panjang atribut adalah 1, dan ketika komponen anak tidak ada, panjang atribut adalah 0 (komponen anak tidak dapat diperoleh);
Jika komponen anak perlu diaktifkan, masih diperlukan untuk menyimpannya dalam memori untuk menghindari rendering ulang saat muncul waktu berikutnya. Maka Anda harus menambahkan atribut Keep-Alive ke tag komponen.
Sebagai kode:
<div id="app"> <button @click="toshow">Click to let the child component display</button> <component v-bind:is="which_to_show" keep-alive></component></div><script> var vm = new Vue({ el: '#app', data: { which_to_show: "first" }, methods: { toshow: function () { //Switch component display var arr = "pertama", "kedua", "ketiga", "]; Template Komponen Anak: "<div> Berikut adalah komponen anak 1 </div>"}, kedua: {// Template komponen anak kedua: "<div> Berikut adalah komponen anak 2 </div>"}, ketiga: {// Template Komponen Anak Ketiga: "<Div> di sini adalah komponen anak 3 </div>"},}}}}}}}}}} {}} {} {}},menjelaskan:
Dalam kasus awal, hanya ada satu elemen (komponen pertama) di atribut VM. $ Children. Setelah mengklik tombol untuk beralih, ada dua elemen di atribut VM. $ Children. Setelah beralih lagi, ada tiga elemen (tiga subkomponen semuanya dipertahankan dalam memori).
Setelah itu, tidak peduli bagaimana Anda beralih, akan ada tiga elemen.
④ Aktifkan Hook
Sederhananya, ini malas memuat.
Misalnya, saat memulai permintaan AJAX, kita perlu menunggu waktu. Jika kita perlu memuat permintaan AJAX setelah selesai, maka kita perlu menggunakan pengait aktivasi.
Dalam hal penggunaan spesifik, Activate adalah atribut pada tingkat yang sama dengan atribut seperti templat dan data. Bentuknya adalah fungsi. Ada parameter dalam fungsi secara default. Parameter ini adalah fungsi. Komponen akan dialihkan hanya ketika fungsi ini dieksekusi.
Untuk membuktikan penundaan pemuatannya, di sisi server, saya menetapkan bahwa ketika permintaan AJAX tertentu dimulai, itu akan menunda 2 detik sebelum mengembalikan konten. Oleh karena itu, saat beralih Komponen 2 untuk pertama kalinya, Anda harus menunggu 2 detik sebelum berhasil beralih:
<Div id = "app"> <button @click = "toshow"> klik untuk membiarkan komponen child display </button> <component v-bind: is = "whot_to_show"> </component> </div> <script> var vm = var var = {el: '#app', data: {yang mana_to_show: "} first"} {{EL: #App ', data: {yang mana_to_show: "} first"} {{EL: {function {function: {function {function: {function: {{function: {function: {{function {function: {function: {function: [pertama "," kedua ", ketiga," "]; Templat: "<div> Berikut ini adalah komponen anak 1 </div>"}, kedua: {// template komponen anak kedua: "<verv> di sini adalah komponen anak 2, di sini adalah konten setelah ajax: {{hello}} </div> function: function () {return {hello:" ""}}, function: function: function () {return {hello: "" "}}, function: function: function () {return {hello:" ""}}, funche; beralih. 3 </div> "}}}); </script>Efek Kode:
【1】 Saat beralih ke Komponen 2 untuk pertama kalinya, Anda harus menunggu 2 detik sebelum ditampilkan (karena Ajax dimulai);
[2] Dalam kasus Keep-Alive, saat beralih ke Komponen 2 yang kedua atau lebih baru, tidak perlu menunggu; Tetapi konten AJAX perlu ditampilkan dua detik setelah pertama kali AJAX diinisiasi;
【3】 Tanpa Keep-Alive (tidak disimpan dalam memori setelah beralih), Anda masih harus menunggu saat beralih ke Komponen 2 untuk kedua kalinya.
[4] Saat menunggu, itu tidak mempengaruhi switching lagi (yaitu, ketika menunggu komponen 2, klik untuk beralih lagi untuk beralih langsung ke komponen 3);
menjelaskan:
【1】 Aktifkan akan dieksekusi hanya ketika komponen diterjemahkan untuk pertama kalinya, dan fungsi hanya akan dieksekusi sekali (komponen muncul tertunda ketika komponen muncul)
【2】 Ketika tidak ada pentah, setiap kali komponen sakelar muncul, itu akan disajikan ulang (karena proses kehancuran dieksekusi ketika disembunyikan sebelumnya), sehingga metode Activate akan dieksekusi.
Mode Transisi Mode Transisi
Sederhananya, biarkan komponen dinamis berubah menjadi animasi. (Ingat instruksi di bagian transisi, transisi cocok untuk komponen dinamis)
Secara default, masuk dan keluar diselesaikan bersama; (Konten yang masuk dapat muncul di bawah konten keluar, yang mengacu pada sisi bawah sumbu y. Setelah keluar, entri akan muncul di posisi yang benar);
Ketika transisi-mode = "out-in", animasinya akan keluar terlebih dahulu dan kemudian masuk;
Ketika transisi-mode = "in-out", animasi pertama kali masuk dan lebih baru (sama seperti masalah yang rentan terjadi pada default);
Kode Sampel: (Menggunakan nama transisi khusus dan file animate.css)
<Div id = "app"> <button @click = "toshow"> Klik untuk membiarkan komponen anak </button> <komponen v-bind: is = "mana_to_show" transition = "bounce" transition-mode = "out-in"> </component> </div> <script> vue.transition ("bouncing", {enter ': enter', enter ', enter', bounce: {enter ', enter, {enter', {enter ', {enter, }) var vm = vue baru ({el: '#app', data: {what_to_show: "first"}, metode: {toshow: function () {// switch komponen var arr = ["pertama", "kedua", "ifoCH); ific. 1];} else {this.which_to_show = arr [0]; {{hello}} </div> ", data: function () {return {hello:" "}}}, ketiga: {// template komponen anak ketiga:" <div> di sini adalah komponen anak 3 </div> "}}}); </script>Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.