Artikel ini mengacu pada dokumen resmi untuk menyusun kode yang lebih rinci dan merupakan tutorial yang lebih aman bagi pemula untuk dibaca dan dipelajari.
Artikel ini berasal dari dokumen resmi:
http://cn.vuejs.org/guide/components.html
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.
Definisi Komponen
① Fungsi komponen:
【1】 Perpanjang elemen HTML dan merangkum kode yang dapat digunakan kembali;
【2】 Komponen adalah elemen khusus, dan kompiler Vuej dapat menambahkan fungsi khusus untuk mereka;
【3】 Dalam beberapa kasus, komponen dapat dalam bentuk elemen HTML asli, memanjang dengan cara seperti IS.
② Tulis komponen standar:
Itu dibagi menjadi langkah -langkah berikut:
[1] Tempat di mana komponen dipasang harus menjadi elemen HTML yang diberikan oleh instance vue. Secara khusus, misalnya, elemen HTML seperti <div id = "app"> </div> di atas dan node anaknya;
【2】 Tentukan komponen, gunakan
var variable name = vue.extend ({template: "Berikut adalah konten templat html"}) dibuat dalam bentuk "var btn = vue.extend ({template:" <button> Ini adalah tombol </buttn> "})【3】 Daftarkan komponen yang ditentukan ke instance VUE, yang akan memungkinkan tag yang ditentukan diganti dengan konten komponen.
Sebagai kode:
// Daftarkan dia ke vue.component ("Add-Button", BTN);Secara khusus, masing -masing tag berikut (dalam lingkup instance root vue)
<Add-button> </add-button>
Akan menjadi
<button> Ini adalah tombol </button>
Diganti.
[4] Metode di atas adalah pendaftaran global (tag tambahan masing-masing dari setiap instance VUE akan digantikan oleh apa yang kita tentukan);
Solusinya adalah pendaftaran lokal.
Misalnya, kode: (Ini adalah atribut template yang diatur. Anda juga dapat menempatkan tag <crd-button> </add-button> di tag <div id = "app"> </div> saat atribut ini tidak tersedia.
<Div id = "app"> </div> <script> // Tentukan komponen var btn = vue.extend ({template: "<button> Ini adalah tombol </button>"}) vue.component ("add-button", btn); // Buat instance root, yaitu, biarkan vue berlaku pada root ini var vm = vue baru ({el: '#app', template: "<crd-button> </add-button>"}); </script>③ Komponen pendaftaran lokal:
Sederhananya, hanya berlaku pada instance vue ini. Metode spesifik adalah melewatkan langkah pendaftaran;
Kemudian ketika mendeklarasikan vue instance, itu akan ditambahkan ke properti komponen (itu adalah objek, ditempatkan dalam bentuk kv) (perhatikan bahwa kata ini memiliki satu lagi s)
Sebagai kode:
<Div id = "app"> </div> <script> // Tentukan komponen var btn = vue.extend ({template: "<butt> Ini adalah tombol </button>"}) // Buat instance root, yaitu, Biarkan Vue pada root ini var vm = new vue ({el: '#App', Templated: " "Tambah tombol": btn}}); </script>Catatan:
Menurut tutorial resmi, metode ini (merujuk pada pendaftaran lokal) juga berlaku untuk sumber daya lain, seperti arahan, filter, dan transisi.
④ Menyuntikkan langkah:
【1】 Menentukan komponen dan komponen pendaftaran diselesaikan dalam satu langkah:
// Tentukan komponen vue.component ("add-button", {template: "<button> Ini adalah tombol </button>"});【2】 Selama pendaftaran lokal, langkah definisi dan pendaftaran selesai:
// Buat instance root, yaitu, biarkan vue berlaku pada root ini var vm = new vue ({el: '#app', template: "<dld-button> </add-button>", komponen: {"add-button": {template: "<button> Ini adalah tombol </butt>" "}}});Atribut ⑤Data
Tidak mungkin untuk secara langsung menambahkan atribut data ke komponen (tidak valid);
Alasannya adalah bahwa jika ini dilakukan, atribut data komponen dapat berupa objek, dan objek ini juga dapat dilewati secara eksternal (misalnya, menyatakan objek terlebih dahulu, dan kemudian objek adalah nilai data), yang dapat menyebabkan semua salinan komponen untuk berbagi objek (yang dilewati secara eksternal), yang jelas salah.
Oleh karena itu, atribut data harus berupa fungsi, dan kemudian ada nilai pengembalian, yang merupakan nilai atribut data.
Dan nilai pengembalian ini harus menjadi objek baru (yaitu, salinan yang dalam, menghindari banyak komponen yang berbagi objek);
Sebagai kode:
var vm = vue baru ({el: '#App', template: "<Acd-button> </add-button>", komponen: {"add-button": {template: "<button> Ini adalah tombol {{{btn}}}}} {} {{btn:Juga, jika ini masalahnya, nilai BTN adalah sama (karena mereka benar -benar berbagi objek)
<div id = "app"> </div> <div id = "app2"> </div> <script> var obj = {btn: "123"}; var vm = vue baru ({el: '#App', template: "<Ack-button> </dld-button>", komponen: {"add-button": {template: "<button> Ini adalah tombol {{btn}} </button>", data: function () {return obj; obj.btn = "456"; var vm2 = vue baru ({el: '#app2', template: "<Acd-button> </dddutton>", komponen: {"add-button": {template: "<button> Ini adalah tombol {{{btn}} </button>", data: function () {return odj; </script>Catatan:
Ketika atribut EL digunakan dalam vue.extend (), itu juga harus menjadi fungsi.
Fitur IS:
[1] Menurut tutorial resmi, beberapa elemen HTML memiliki batasan pada elemen apa yang dapat ditempatkan di dalamnya;
Tetapi pada kenyataannya, saya tidak menemukan masalah dengan tes saya sendiri, jadi saya tidak mengerti.
【2】 Beri saya URL, jika sesuatu benar -benar terjadi, saya akan mempelajarinya kembali.
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
Di atas adalah contoh analisis definisi komponen Vuejs di bab ke -8 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!