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.
Artikel ini adalah penjelasan yang lebih rinci yang disusun oleh editor berdasarkan dokumen resmi. Kode ini lebih lengkap dan sempurna, yang sangat cocok untuk dipelajari oleh pemula.
Dokumentasi Resmi:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Komponen - Item lain -lain dirinci sebagai berikut:
① komponen dan v-for
Sederhananya, komponen digunakan kembali beberapa kali;
Misalnya, baris tertentu dalam tabel, atau tampilan jendela produk e-commerce (jendela tunggal), dapat menjadi komponen yang dapat digunakan kembali;
Cukup tulis salah satunya sebagai komponen dan kemudian jadikan sumber data array (atau objek, tetapi saya pribadi berpikir itu adalah array). Melalui Traversal V-For, setiap contoh komponen dapat memperoleh salah satu array, sehingga menghasilkan semua komponen.
Karena multiplexing, alat peraga perlu digunakan untuk mengikat hasil traversal I dan data terikat pada alat peraga. Metode pengikatan sama dengan bentuk biasa dan terikat dalam templat.
Kode contoh:
<Div id = "app"> <tombol @click = "toKnowChildren"> Klik untuk membiarkan komponen anak menampilkan </button> <able> <tr> <td> index </td> <td> ID </td> <td> </td> </tr> "ID" ID "ID" ID = "ID =" ID = "ID =" ID = "ID =" ID = "ID:" ID "ID:" ID "ID:" ID "ID" ID "ID" ID "ID" ID "ID" ID "ID" ID "ID" ID "ID" ID "ID" ID "ID" </div> <script> var vm = vue baru ({el: '#app', data: {item: [1, 2, 3, 4]}, metode: {toKnowchildren: function () {// switch komponen komponen konsol.log (ini. "<td> {{index}} </td>" + "<td> {{id}} </td>" + "<td> Ini adalah komponen anak </td>" + "</tr>", props: ['id', 'index']}}}); </script>menjelaskan:
【1】 Ingatlah untuk meletakkan data untuk disahkan dalam alat peraga!
【2】 BIND INDEX DAN INDEX $ INDEX, karena indeks dimulai pada 0, sehingga kolom di mana indeks berada pada 0; ID terikat pada i yang melintasi item, jadi ID dimulai pada 1.
[3] Anda dapat memperoleh komponen anak melalui ini. $ Anak -anak dalam komponen induk (tetapi lebih merepotkan, terutama ketika ada banyak komponen, sulit untuk ditemukan);
② Tulis komponen yang dapat digunakan kembali:
Sederhananya, ada kemungkinan bahwa komponen sekali pakai (hanya digunakan di sini, tidak digunakan kembali) secara ketat digabungkan ke komponen lain, tetapi komponen yang dapat digunakan kembali harus menentukan antarmuka publik yang jelas. (Jika tidak, bagaimana orang lain menggunakannya?)
Komponen yang dapat digunakan kembali pada dasarnya perlu berinteraksi dengan bagian luar, dan komponen dan antarmuka interaktif yang diungkapkan secara eksternal meliputi:
【1】 Alat peraga: memungkinkan data lingkungan eksternal diteruskan ke komponen;
【2】 peristiwa: Izinkan komponen untuk memicu aksi lingkungan eksternal, yaitu, dengan menambahkan arahan V-on pada titik pemasangan, metode komponen induk dipicu pada saat yang sama ketika peristiwa komponen anak dipicu;
[3] Slot: Distribusi, memungkinkan konten komponen induk dimasukkan ke dalam struktur tampilan komponen anak.
Sebagai kode:
<Div id = "app"> <p> Ini adalah komponen induk pertama </p> <widget: the-value = "test" @beberapa = "todo"> <span> 【Konten komponen induk pertama yang dimasukkan】 </span> </widget> </div> <v ID = "app2"> <p> Ini adalah komponen induk kedua </pup = "TOP2"> ini adalah widget @pexto "ini </po8> </poPget" <p> ini </span> </poPget "widget @pepdo @widget" ini <script> vue.component ("widget", {template: "<button @click = 'dosomething'> <slot> </slot> Ini adalah komponen yang digunakan kembali, klik {{{{{{{{{{{{{fumt) {{{{{{{{{{{{{{fumt), {{{{{{{{{{function) {{{{{{{{{{function) {{{{{{{{{{function), console.log ("widget klik");}}, props: ['thevalue']}) var vm = vue baru ({el: '#app', data: {test: "test"}, {todo: function () {console.log ("Ini adalah komponen induk pertama")}}} var vm_other = vue baru ({el: '#app2', data: {name: "first"}, Metode: {TODO: function () {console.log ("Ini adalah komponen induk lain")}}}); </script>menjelaskan:
[1] Slot distribusi digunakan dalam komponen induk pertama, dan alat peraga digunakan untuk meneruskan nilai (lulus nilai tes ke evaluasi komponen anak);
[2] Di antara dua komponen, setelah mengklik komponen anak, metode dosomething dalam metode, dan kemudian beberapa peristiwa dalam acara dieksekusi. Kemudian, melalui mount point @beberapa = "TODO" untuk mengikat beberapa peristiwa komponen anak dan metode TODO komponen induk bersama -sama.
Oleh karena itu, setelah mengklik komponen anak, metode TODO dari komponen induk pada akhirnya akan dieksekusi.
[3] Mengubah nilai yang diteruskan ke komponen anak dalam komponen induk akan secara sinkron mengubah nilai komponen anak (yaitu, keduanya akan terikat data);
③Async Components:
Menurut pemahaman saya, sederhananya, aplikasi besar memiliki banyak komponen, tetapi beberapa komponen tidak perlu segera dimuat, sehingga mereka dibagi menjadi beberapa komponen (misalnya, yang perlu dimuat segera, tetapi tidak segera);
Jika perlu segera dimuat, jelas lebih baik untuk memasukkannya ke dalam file yang sama (atau diminta bersama dalam batch yang sama);
Jika tidak perlu dimuat segera, itu dapat ditempatkan di file lain, tetapi bila diperlukan, Ajax akan memintanya ke server;
Permintaan berikut adalah komponen asinkron;
Fungsi vue.js adalah fungsi vue.js, yang memungkinkan komponen untuk didefinisikan sebagai fungsi pabrik dan secara dinamis mem -parsing definisi komponen.
Dapat digunakan dengan Webpack.
Adapun cara menggunakannya secara detail, saya tidak begitu memahaminya. Saya tidak bisa menulisnya dengan jelas di tutorial, jadi saya akan mengesampingkannya dan menunggu untuk mempelajarinya saat dibutuhkan.
Link:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
④ Konvensi Penamaan Source:
Sederhananya, tag HTML (seperti div dan div adalah sama) dan fitur (seperti instruksi menulis seperti V-on bukan von) tidak peka.
Nama sumber daya sering ditulis dalam seperti unta (seperti unta seperti unta), atau dalam bentuk huruf kapital dari huruf pertama dari kata (seperti Pascalcase, saya tidak tahu harus menyebutnya apa, tetapi saya jarang menulis ini).
Vue.component ("mytemplate", {// ...... dihilangkan})Vue.js dapat secara otomatis mengenali ini dan mengonversinya.
<My-template> </syplate>
Template di atas dapat secara otomatis menggantikan tag ini.
Components Komponen Rekursif:
Sederhananya, komponen rekursif adalah komponen yang menanamkan templatnya sendiri.
Jika suatu komponen ingin berulang, ia membutuhkan atribut nama, dan Vue.component hadir dengan atribut namanya sendiri.
Mungkin ini terlihat seperti ini,
<Div ID = "App"> <my-template> </yplate> </div> <script> vue.component ("myTemplate", {template: "<p> <p> <prate-template> </yplate> </p>"})Ini adalah rekursi yang tak terbatas, yang jelas tidak mungkin. Oleh karena itu, perlu untuk mengontrol jumlah lapisan rekursinya, misalnya, mengontrol rekursi melalui data, dan menghentikan rekursi ketika data kosong.
Kode sampel adalah sebagai berikut:
<ul id = "app"> <li> {{b}} </li> <my-template v-if = "a": a = "aa": b = "ab"> </pemplate> </ul> <script> vue.component ("mytemplate", {template: 'template> {Template ", {Template {template {template {template {template {template {template {template: v-if="a" :a="aa" :b="ab"></my-template></ul>', props: ["a", "b"] }) var data = { a: { a: { a: { a: 0, b: 3 }, b: 2 }, b: 1 } var vm = new Vue({ el: '#app', data: data, methods: { todo: function () {this.test += "!"; </script>menjelaskan:
[1] Ketika diturunkan, nilai A dan nilai B dilewatkan melalui alat peraga, di mana nilai a digunakan sebagai sumber data untuk nilai a dan b komponen setelah rekursif;
Kemudian tentukan apakah nilai yang diteruskan ke komponen rekursif ada, dan jika demikian, terus berulang;
Jika nilai A tidak ada, maka rekursi dihentikan.
⑥ Contoh Fragment:
Sederhananya, instance yang disebut fragmen berarti bahwa templat komponen tidak berada di bawah simpul akar:
Kode instance fragmen:
Vue.component ("mytemplate", {template: '<verv> 1 </div>' + '<ver> 2 </div>',})Contoh non-fragment:
Vue.component ("mytemplate", {template: '<verv>' + '<div> 1 </div>' + '<verv> 2 </div>' + '</div>',}))Karakteristik instance fragmen berikut diabaikan:
[1] Instruksi kontrol non-proses pada elemen komponen (seperti instruksi V-Show yang ditulis pada titik pemasangan dan dikendalikan oleh komponen induk, tetapi perhatikan bahwa V-jika termasuk dalam instruksi kontrol proses);
【2】 fitur non-prop (perhatikan bahwa alat peraga tidak akan diabaikan, selain alat peraga ditulis pada titik pemasangan);
[3] Transisi (yaitu, atribut transisi akan diabaikan);
Untuk referensi lebih lanjut tentang dokumentasi resmi:
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
⑦Inline Template
Referensi: http://cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
Di atas adalah komponen Vuejs Bab 13 yang diperkenalkan oleh editor kepada Anda - item lain -lain. 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!