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.
Komponen penggunaan
daftar
Seperti yang disebutkan sebelumnya, kita dapat membuat konstruktor komponen menggunakan vue.extend ():
var myComponent = vue.extend ({// options ...})Untuk menggunakan konstruktor ini sebagai komponen, Anda perlu mendaftar dengan `vue.component (tag, konstruktor)` **:
// Daftarkan secara global komponen, tagnya adalah my-componentvue.component ('my-component', myComponent)<p> Vue.js tidak mengamanatkan aturan W3C (huruf kecil, dan termasuk bilah pendek) untuk nama tag khusus, meskipun lebih baik mengikuti aturan ini.
Setelah komponen terdaftar, dapat digunakan sebagai elemen khusus <my-komponen> dalam modul instance induk. Untuk memastikan komponen terdaftar sebelum menginisialisasi instance root:
<Div id = "example"> <my-pomponent> </ypomponent> </div> // define var mycomponent = vue.extend ({template: '<verv> komponen khusus! </div>'}) // daftarkan vue.component ('my-component', mycomponent myComponent) // CREATE root vue baru ('my-component', mycomponent)/Create New Vue root vue ('my-component', myComponent) // CREATE ROOT VUE ROOT baruDiterjemahkan sebagai:
<div id = "example"> <div> Komponen khusus! </div> </div>
Perhatikan bahwa templat komponen menggantikan elemen khusus, dan fungsi elemen khusus hanya sebagai titik pemasangan. Anda dapat menggunakan opsi instan. Ganti untuk memutuskan apakah akan menggantinya.
Pendaftaran lokal
Tidak perlu mendaftarkan setiap komponen secara global. Ini hanya dapat digunakan dalam komponen lain, mendaftar dengan komponen opsi instan:
var child = vue.extend ({ / * ... * /}) var parent = vue.extend ({template: '...', komponen: {// <my-komponen> hanya dapat digunakan dalam template komponen induk 'komponen saya': anak}})Enkapsulasi ini juga cocok untuk sumber daya lain seperti instruksi, filter, dan transisi.
Daftar gula sintaksis
Untuk membuat acara lebih sederhana, Anda dapat meneruskan objek opsi secara langsung alih -alih konstruktor ke vue.component () dan opsi komponen. Vue.js secara otomatis memanggil vue.extend () di belakang bagian belakang:
// Perpanjang dan daftarkan vue.component ('my-component', {template: '<div> Komponen khusus! </div>'}) // Ini juga dimungkinkan dengan pendaftaran lokal var parent = vue.extend ({components: {'my-component': {template: '<Div> Komponen khusus! </Div>Masalah Opsi Komponen
Sebagian besar opsi yang diteruskan ke konstruktor VUE juga dapat digunakan di vue.Extend (), tetapi ada dua kasus khusus: data dan EL. Bayangkan jika kita hanya meneruskan objek sebagai opsi data ke vue.extend ():
var data = {a: 1} var myComponent = vue.extend ({data: data})Masalah dengan ini adalah bahwa semua contoh myComponent akan berbagi objek `data` yang sama! Ini pada dasarnya bukan yang kita inginkan, jadi kita harus menggunakan fungsi sebagai opsi `data` untuk mengembalikan objek baru:
var myComponent = vue.extend ({data: function () {return {a: 1}}})Demikian pula, opsi `el` juga harus menjadi fungsi saat digunakan dalam` vue.extend () `.
Analisis template
Vue's Template adalah templat DOM, yang menggunakan browser asli parser alih -alih menerapkannya dengan sendirinya. Dibandingkan dengan templat string, templat DOM memiliki beberapa manfaat, tetapi ada masalah, dan itu harus menjadi cuplikan HTML yang valid. Beberapa elemen HTML memiliki batasan pada elemen apa yang dapat ditempatkan di dalamnya. Keterbatasan Umum:
• A tidak dapat berisi elemen interaktif lainnya (seperti tombol, tautan)
• UL dan OL hanya dapat secara langsung menyertakan Li
• Pilih hanya dapat menyertakan opsi dan optgroup
• Meja hanya dapat secara langsung menyertakan kepala, tbody, tfoot, tr, caption, col, colgroup
• TR hanya dapat menyertakan TH dan TD secara langsung
Dalam praktiknya, keterbatasan ini dapat menyebabkan hasil yang tidak terduga. Meskipun dapat bekerja dalam kasus sederhana, Anda tidak dapat mengandalkan komponen khusus untuk memperluas hasil sebelum validasi browser. Misalnya, <my-select> <pection> ... </tiption> </peselect> bukan templat yang valid, bahkan jika komponen My-Select akhirnya diperluas ke <pect> ... </select>.
Hasil lain adalah bahwa tag khusus (termasuk elemen khusus dan tag khusus, seperti <component>, <emplate>, <partial>) tidak dapat digunakan dalam tag yang memiliki batasan pada elemen internal, seperti UL, SELECT, TABEL, dll. Tag khusus yang ditempatkan di dalam elemen ini akan disebutkan di luar elemen, dengan demikian merampok dengan salah.
Untuk elemen khusus, atribut IS harus digunakan:
<able> <tr is = "my-komponen"> </tr> </ablept>
`` tidak dapat digunakan dalam ``, `` saat ini, ``
Mungkin ada beberapa ``:
<ableber> <tbody v-for = "item dalam item"> <tr> bahkan baris </tr> <tr> baris ganjil </tr> </tbody> </able>
Alat peraga
Melewati data menggunakan alat peraga
Lingkup instance komponen adalah yatim piatu. Ini berarti bahwa data komponen induk tidak dapat dan tidak boleh dirujuk secara langsung dalam template komponen anak. Anda dapat menggunakan alat peraga untuk meneruskan data ke komponen anak.
"Prop" adalah bidang data komponen yang diharapkan akan diturunkan dari komponen induk. Komponen anak perlu secara eksplisit menyatakan alat peraga dengan opsi alat peraga:
Vue.component ('child', {// mendeklarasikan props props: ['msg'], // prop dapat digunakan dalam templat // Anda dapat menggunakan `this.msg` untuk mengatur template: '<span> {{msg}} </span>'})Kemudian berikan string normal:
<child msg = "halo!"> </child>
Hump vs Horizontal Bar
Atribut HTML tidak sensitif. Ketika penyangga dengan bentuk Camelcase digunakan sebagai fitur, ia perlu dikonversi menjadi kasus-kasus (garis horizontal pendek dipisahkan):
Vue.component ('Child', {// Camelcase dalam JavaScript Props: ['myMessage'], template: '<span> {{myMessage}} </span>'}) <!-Kasus kebab di html-> <anak saya-pesan saya = "Halo!"> </Child>Alat peraga dinamis
Mirip dengan menggunakan v-bind untuk mengikat atribut HTML ke ekspresi, Anda juga dapat menggunakan V-bind untuk mengikat alat peraga dinamis ke data komponen induk. Setiap kali data komponen induk berubah, itu juga ditransmisikan ke komponen anak:
<div> <input v-Model = "ParentMsg"> <br> <anak-v-bind: my-message = "parentMsg"> </child> </div>
Menggunakan sintaks singkatan dari `V-bind` biasanya lebih sederhana:
<Child: my-message = "ParentMsg"> </dild>
Sintaks literal vs sintaksis dinamis
Kesalahan umum untuk pemula adalah meneruskan nilai numerik menggunakan sintaks literal:
<!-Lulus string "1"->
<comp beberapa-prop = "1"> </comp>
Karena itu adalah prop literal, nilainya dilewatkan dalam string `" 1 "` bukan nomor aktual. Jika Anda ingin melewati nomor JavaScript yang sebenarnya, Anda perlu menggunakan sintaksis dinamis sehingga nilainya dihitung sebagai ekspresi JavaScript:
<!-Lewati nomor sebenarnya->
<comp: some-prop = "1"> </comp>
Jenis prop binding
Prop adalah ikatan satu arah secara default: Ketika sifat-sifat komponen induk berubah, itu akan diteruskan ke komponen anak, tetapi sebaliknya tidak akan. Ini untuk mencegah komponen anak dari secara tidak sengaja memodifikasi keadaan komponen induk - ini akan membuat aliran data aplikasi sulit dipahami. Namun, juga dimungkinkan untuk secara eksplisit memaksa ikatan dua kali atau satu kali menggunakan .sync atau .once mengikat pengubah:
Sintaks komparatif:
<!-Default adalah pengikatan satu arah-> <child: msg = "parentMsg"> </child> <!-binding dua arah-> <child: msg.sync = "parentsmsg"> </child> <!-pengikatan tunggal-> <anak: msg.once = "parentMsg"> </child> tunggal-> <child: msg.once = "parentMsg"> </child> tunggal-> <child: msg.once = "parentmsg"> </child> tunggal-tunggal-> <child: msg.once = "ParentMSG"> </child> tunggal-> <child: msg.once = "ParentMSG"> </child>
Binding Bidirectional menyinkronkan atribut MSG dari komponen anak kembali ke atribut ParentMSG dari komponen induk. Ikatan tunggal tidak akan menyinkronkan perubahan setelah pembuatan.
Perhatikan bahwa jika prop adalah objek atau array, itu dilewatkan dengan referensi. Memodifikasinya dalam komponen anak akan mempengaruhi keadaan komponen induk, terlepas dari jenis pengikatan yang digunakan.
Verifikasi prop
Komponen dapat menentukan persyaratan verifikasi untuk alat peraga. Ini berguna ketika komponen diberikan kepada orang lain, karena persyaratan verifikasi ini membentuk API komponen, memastikan bahwa orang lain menggunakan komponen dengan benar. Pada saat ini, nilai alat peraga adalah objek yang berisi persyaratan verifikasi:
Vue.component ('example', {props: {// deteksi tipe dasar (`null` berarti jenis apa pun ok) propa: angka, // beberapa tipe (1.0.21+) propm: [string, angka], // nilainya yang diperlukan: {tipe: string, diperlukan: true}, // angka, dengan nilai default: {{type: string, wajib: true}, // angka, dengan nilai default: {{type: string, wajib: true}, // angka, dengan nilai default: {{type: string, wajib: true},//angka, dengan nilai default: {{type: string, {true}, // angka, dengan nilai default: {{tipe: dikembalikan oleh fungsi ke propd: {type: object, default: function () {return {msg: 'hello'}}}, // tentukan prop ini sebagai pengikatan dua arah // jika tipe pengikat tidak benar, function {function {function {{{Twoway: {function {function {function {function {function {function {function {function {{{Twoway: {Twoway: {true {true {true {true {true {true {true {true {true {true {true Konversi nilai (yang baru di 1.0.12) // Konversi nilai sebelum menetapkan nilai propg: {coerce: function (val) {return val + '' // konversi nilai ke string}}, proph: {coerce: function (val) {return json.parse (val) // Convert JSON ke objek}}}} (val) // Convert ke JSON ke objek}}})Jenis dapat menjadi konstruktor asli berikut:
•Rangkaian
•Nomor
• Boolean
•Fungsi
•Obyek
• Array
Jenis juga dapat menjadi konstruktor khusus yang menggunakan deteksi dari deteksi.
Ketika verifikasi prop gagal, Vue menolak untuk menetapkan nilai ini pada komponen anak, dan peringatan akan dilemparkan jika versi pengembangan digunakan.
Komunikasi komponen orangtua-anak
Tautan induk
Komponen anak dapat mengakses komponen induknya dengan ini. $ Parent. Keturunan instance root dapat mengaksesnya dengan ini. $ Root. Komponen induk memiliki array ini. $ Anak -anak yang berisi semua elemen anaknya.
Meskipun setiap contoh pada rantai induk dapat diakses, komponen anak harus menghindari mengandalkan langsung data komponen induk dan mencoba menggunakan alat peraga untuk meneruskan data secara eksplisit. Juga, sangat buruk untuk memodifikasi keadaan komponen induk dalam komponen anak karena:
1. Ini memungkinkan komponen induk untuk ditambah erat dengan komponen anak;
2. Jika Anda hanya melihat komponen induk, sulit untuk memahami keadaan komponen induk. Karena dapat dimodifikasi oleh komponen anak mana pun! Idealnya, hanya komponen yang dapat memodifikasi keadaannya sendiri.
Acara Kustom
Instance Vue mengimplementasikan antarmuka acara khusus untuk komunikasi di pohon komponen. Sistem acara ini tidak tergantung pada acara DOM asli dan menggunakannya secara berbeda.
Setiap instance Vue adalah pemicu peristiwa:
• Gunakan $ on () untuk mendengarkan acara;
• Gunakan $ emit () untuk memicu acara di atasnya;
• Gunakan $ dispatch () untuk mendistribusikan acara, dan acara menggelembung di sepanjang rantai induk;
• Gunakan $ siaran () untuk menyiarkan acara, dan acara tersebut ditransmisikan ke bawah ke semua keturunan.
Berbeda dengan acara DOM, acara VUE secara otomatis menghentikan gelembung setelah panggilan balik pertama dipicu selama proses gelembung, kecuali panggilan balik secara eksplisit mengembalikan true.
Contoh sederhana:
<!-Templat Komponen Anak-> <Templat ID = "Child-Template"> <input v-Model = "msg"> <tombol v-on: click = "notify"> acara pengiriman </buttone> </lemplate> <!-Templat komponen induk-> <v id = "event-example"> <p> Pesan: {{{{{Pesan {{Pesan | JSON}} </p> <dild> </fild> </div> // daftarkan komponen anak // kirim pesan saat ini keluar vue.component ('child', {template: '#child-template', data: function () {return {msg: 'hello'}, metode: {notify: function () {ife {msg: 'hello'}, {notify (function () {msg: hello. this.$dispatch('child-msg', this.msg) this.msg = '' } } }})// Initialize the parent component // Push the event into an array when the message is received var parent = new Vue({ el: '#events-example', data: { messages: [] }, // When creating an instance, the `events` option simply calls `$on` events: { 'child-msg': function (msg) {// `this` di callback event secara otomatis terikat ke instance di mana ia terdaftar this.messages.push (msg)}}})Gunakan V-On untuk mengikat acara khusus
Contoh di atas sangat bagus, tetapi kita tidak dapat secara intuitif melihat di mana acara "anak-MSG" berasal dari kode komponen induk. Akan lebih baik jika kita mendeklarasikan event handler di mana subkomponen digunakan dalam templat. Untuk subkomponen ini, Anda dapat menggunakan V-on untuk mendengarkan acara khusus:
<Child V-On: Child-MSG = "HandleIt"> </dn child>
Ini memperjelas: Ketika komponen anak memicu acara "anak-MSG", metode `handleit` komponen induk akan dipanggil. Semua kode yang mempengaruhi keadaan komponen induk ditempatkan dalam metode `handleit` komponen induk; Komponen anak hanya berfokus pada acara pemicu.
Indeks subkomponen
Terlepas dari alat peraga dan peristiwa, kadang -kadang masih perlu untuk mengakses komponen anak secara langsung di JavaScript. Untuk tujuan ini, Anda dapat menggunakan V-REF untuk menentukan ID indeks untuk komponen anak. Misalnya:
<Div id = "Parent"> <user-profile v-ref: Profile> </user-profile> </div> var parent = new vue ({el: '#parent'}) // akses komponen anak var anak = induk. $ refs.profileKetika V-REF dan V-FOR digunakan bersama, REF adalah array atau objek yang berisi komponen anak yang sesuai.
Gunakan slot untuk mendistribusikan konten
Saat menggunakan komponen, Anda sering harus menggabungkannya seperti ini:
<PEPP> <PEPP-HEADER> </APP-HEADER> <PEP-FOOTER> </APP-FOOTER> </PEPRET>
Catatan dua poin:
1. Komponen <PEPP> tidak tahu konten apa yang ada di titik pemasangannya. Konten titik pemasangan ditentukan oleh komponen induk dari <PEPP>.
2. Komponen <PEPP> kemungkinan memiliki template sendiri.
Agar komponen dapat digabungkan, kita membutuhkan cara untuk mencampur konten komponen induk dengan template komponen anak sendiri. Pemrosesan ini disebut distribusi konten (atau "terjemahan" jika Anda terbiasa dengan Angular). Vue.js mengimplementasikan API distribusi konten yang mengacu pada draf spesifikasi komponen web saat ini dan menggunakan elemen <slot> khusus sebagai slot untuk konten asli.
Kompilasi ruang lingkup
Sebelum menyelam ke API distribusi konten, kami pertama -tama mengklarifikasi ruang lingkup kompilasi konten. Asumsikan bahwa templatnya adalah:
<Compon- component>
{{msg}}
</scomponent>
Haruskah MSG terikat pada data komponen induk, atau data yang terikat pada komponen anak? Jawabannya adalah komponen induk. Lingkup komponen sederhana:
Konten template komponen induk dikompilasi dalam ruang lingkup komponen induk; Isi Template Komponen Anak dikompilasi dalam ruang lingkup komponen anak
Kesalahan umum adalah mencoba mengikat arahan ke sifat/metode komponen anak dalam template komponen induk:
<!-tidak valid->
<Komponen anak-anak v-show = "somechildproperty"> </child-komponen>
Dengan asumsi somechildproperty adalah properti dari komponen anak, contoh di atas tidak akan berfungsi seperti yang diharapkan. Template komponen induk seharusnya tidak mengetahui status komponen anak.
Jika Anda ingin mengikat instruksi dalam subkomponen ke simpul root komponen, Anda harus melakukan ini di templatnya:
Vue.component ('child-component', {// bekerja karena berada di template lingkup yang benar: '<div v-show = "somechildproperty"> child </div>', data: function () {return {somechildproperty: true}}}))Demikian pula, konten distribusi dikompilasi dalam ruang lingkup komponen induk.
Slot tunggal
Isi komponen induk akan dibuang kecuali template komponen anak berisi <slot>. Jika template komponen anak hanya memiliki satu slot tanpa karakteristik, seluruh konten komponen induk akan dimasukkan di mana slot berada dan menggantinya.
Konten tag <slot> dianggap sebagai konten rollback. Konten fallback dikompilasi dalam ruang lingkup komponen anak, dan konten fallback ditampilkan ketika elemen host kosong dan tidak ada konten untuk dimasukkan.
Asumsikan bahwa komponen komponen MY memiliki templat berikut:
<div> <h1> Ini adalah komponen saya! </h1> <slot> Jika tidak ada konten yang didistribusikan, itu akan menunjukkan kepada saya. </slot> </div>
Template komponen induk:
<my-komponen>
<p> Ini adalah beberapa konten asli </p>
<p> Ini adalah beberapa konten asli </p>
</spomponent>
Hasil Rendering:
<div> <h1> Ini adalah komponen saya! </h1> <p> Ini adalah beberapa konten asli </p> <p> Ini adalah beberapa konten asli </p> </div>
Slot bernama
Elemen <slot> dapat dikonfigurasi dengan nama fitur khusus untuk mengonfigurasi cara mendistribusikan konten. Beberapa slot dapat memiliki nama yang berbeda. Slot bernama akan cocok dengan elemen dalam fragmen konten yang memiliki atribut slot yang sesuai.
Masih ada slot anonim, yang merupakan slot default, sebagai slot fallback untuk fragmen konten yang cocok yang tidak dapat ditemukan. Tanpa slot default, fragmen konten yang tak tertandingi ini akan dibuang.
Misalnya, misalkan kita memiliki komponen multi-inseri dengan templat seperti:
<div> <slot name = "One"> </slot> <slot> </slot> <slot name = "dua"> </slot> </div>
Template komponen induk:
<pultion insertion> <p slot = "satu"> satu </p> <p slot = "dua"> dua </p> <p> default a </p> </dulti-insertion>
Hasil rendering adalah:
<dv> <p slot = "satu"> satu </p> <p> default a </p> <p slot = "dua"> dua </p> </div>
API Distribusi Konten adalah mekanisme yang sangat berguna saat menggabungkan komponen.
Komponen Dinamis
Beberapa komponen dapat menggunakan titik pemasangan yang sama dan kemudian secara dinamis beralih di antara mereka. Gunakan elemen <Component> yang dicadangkan untuk mengikat secara dinamis ke properti ITS:
vue baru ({el: 'body', data: {currentView: 'home'}, komponen: {home: {/ * ... */}, posting: {/ * ... */}, arsip: {/ * ... */}}) <komponen: "CurrentView"> <!-Component Change ketika vm.Tetap hidup
Jika komponen sakelar disimpan dalam memori, dapat disimpan atau diserahkan kembali. Untuk melakukan ini, Anda dapat menambahkan parameter arahan tetap hidup:
<Component: IS = "CurrentView" Keep-Alive>
<!-Komponen yang tidak aktif akan di-cache->
</somponent>
Aktifkan Hook
Saat beralih komponen, memotong menjadi komponen mungkin memerlukan beberapa operasi asinkron sebelum memotongnya. Untuk mengontrol durasi switching komponen, tambahkan kait aktif ke komponen pemotongan:
Vue.component ('Activate-example', {Activate: function (selesai) {var self = loadDataAsync ini (function (data) {self.somedata = data selesai ()})}}))Perhatikan bahwa Hook Activate hanya bertindak selama switching komponen dinamis atau rendering inisialisasi komponen statis, dan tidak bertindak dalam penyisipan manual menggunakan metode instan.
mode transisi
Fitur mode transisi digunakan untuk menentukan bagaimana dua komponen dinamis transisi.
Secara default, masukkan dan tinggalkan transisi dengan lancar. Fitur ini dapat menentukan dua mode lain:
• In-out: Komponen baru pertama-tama transisi ke, dan setelah transisi selesai, komponen saat ini akan bertransisi.
• Out-in: Komponen saat ini pertama-tama transisi keluar, dan setelah transisi selesai, komponen baru transisi ke dalam proses.
Contoh:
<!-Fade Out First dan kemudian Fade In-> <Component: IS = "View" Transition = "Fade" Transition-Mode = "out-in"> </component> .fade-transition {transisi: opacity .3s kemudahan;}.Aneka ragam
Komponen dan v-for
Komponen khusus dapat menggunakan V-for secara langsung seperti elemen normal:
<my component v-for = "item in item"> </spomponent>
Namun, data tidak dapat diteruskan ke komponen karena ruang lingkup komponen adalah yatim piatu. Untuk meneruskan data ke komponen, alat peraga harus digunakan:
<komponen saya
v-for = "item dalam item"
: item = "item"
: index = "$ index">
</spomponent>
Alasan mengapa item tidak secara otomatis disuntikkan ke dalam komponen adalah karena ini menyebabkan komponen ditambah dengan rapat ke V-for saat ini. Secara eksplisit menyatakan dari mana data berasal dan dapat digunakan kembali di tempat lain untuk komponen.
Menulis komponen yang dapat digunakan kembali
Saat menulis komponen, akan bermanfaat untuk mengingat apakah akan menggunakan kembali komponen. Tidak ada hubungannya dengan kopling ketat komponen sekali pakai ke komponen lain, tetapi komponen yang dapat digunakan kembali harus mendefinisikan antarmuka publik yang jelas.
API Komponen Vue.js berasal dari tiga bagian: prop, acara dan slot:
• Prop memungkinkan lingkungan eksternal untuk meneruskan data ke komponen;
• peristiwa memungkinkan komponen memicu tindakan di lingkungan eksternal;
• Slot memungkinkan lingkungan eksternal untuk memasukkan konten ke dalam struktur tampilan komponen.
Menggunakan sintaks singkatan dari V-Bind dan V-On, lekukan template jelas dan ringkas:
<komponen saya
: foo = "baz"
: bar = "QUX"
@event-a = "dothis"
@event-b = "dothat">
<!-konten->
<slot img = "ikon" src = "...">
<p slot = "teks utama"> halo! </p>
</spomponent>
Komponen asinkron
Dalam aplikasi besar, kita mungkin perlu membagi aplikasi menjadi potongan -potongan kecil dan mengunduhnya dari server hanya jika diperlukan. Untuk membuat segalanya lebih mudah, Vue.js memungkinkan komponen untuk didefinisikan sebagai fungsi pabrik, secara dinamis menguraikan definisi komponen. Vue.js hanya memicu fungsi pabrik ketika komponen perlu diterjemahkan, dan menyimpan hasilnya untuk render ulang nanti. Misalnya:
Vue.component ('async-example', function (resolve, reject) {setTimeOut (function () {resolve ({template: '<div> saya async! </div>'})}, 1000)})Fungsi pabrik menerima Callback Resolve, yang disebut ketika definisi komponen yang diunduh dari server diterima. Anda juga dapat menelepon penolakan (alasan) untuk menunjukkan bahwa pemuatan telah gagal. Di sini SetTimeout hanya untuk demonstrasi. Terserah Anda sepenuhnya untuk mendapatkan komponen. Fungsi Segmentasi Kode yang Disarankan dengan Webpack:
Vue.component ('async-webpack-example', function (resolve) {// khusus ini memerlukan sintaksis memberi tahu webpack // secara otomatis membagi kode yang dikompilasi menjadi berbagai blok, // blok ini akan secara otomatis diunduh melalui permintaan jax. Perlu (['./ My-Async-Component'], Resolve)}))Konvensi Penamaan Sumber Daya
Beberapa sumber daya, seperti komponen dan arahan, muncul dalam templat sebagai atribut HTML atau elemen khusus HTML. Karena nama atribut HTML dan nama tag tidak peka huruf besar-kecil, nama sumber daya biasanya perlu menggunakan bentuk kasus-kasus alih-alih Camelcase, yang tidak terlalu nyaman.
Vue.js mendukung nama sumber daya dalam bentuk Camelcase atau Pascalcase dan secara otomatis mengubahnya menjadi kasus-kasus di templat (mirip dengan konvensi penamaan prop):
// dalam komponen definisi komponen: {// Daftarkan myComponent dengan bentuk CamelCase: {/ *... */}} <!-Menggunakan bentuk kebab-case dalam templat-> <my-component> </prom-component> eS6 singkatan literal juga fine: // PascalcaseMport Textbox dari '. './components/dropdown--menu'; export default {components: {// tulis <Text-box> dan <TropDown-Menu> TextBox, dropDownMenu}}Komponen rekursif
Komponen dapat menyebut diri mereka secara rekursif dalam templat mereka, tetapi hanya jika memiliki opsi nama:
var stackoverflow = vue.extend ({name: 'stack-overflow', template: '<div>' + // Sebut saja secara rekursif dengan sendirinya '<Stack-Overflow> </stack-overflow>' + '</div>'})Komponen di atas akan menyebabkan kesalahan "ukuran tumpukan maks terlampaui", jadi pastikan bahwa panggilan rekursif memiliki kondisi penghentian. Ketika komponen terdaftar secara global menggunakan vue.component (), ID komponen secara otomatis diatur ke opsi nama komponen.
Contoh fragmen
Saat menggunakan opsi template, isi templat ganti elemen mount instance. Oleh karena itu, elemen tingkat atas dari template yang disarankan selalu merupakan elemen tunggal.
Jangan tulis template seperti ini:
<div> node root 1 </div>
<div> root node 2 </div>
Disarankan untuk menulis ini:
<div>
Saya memiliki satu node root!
<div> node 1 </div>
<div> node 2 </div>
</div>
Situasi berikut akan mengubah instance menjadi contoh yang terfragmentasi:
1. Templat berisi beberapa elemen tingkat atas.
2. Template hanya berisi teks normal.
3. Template hanya berisi komponen lain (komponen lain mungkin merupakan contoh fragmen).
4. Template hanya berisi satu arahan elemen, seperti <partial> atau <Router-View> dari Vue-Router.
5. Node root template memiliki instruksi kontrol proses, seperti V-IF atau V-For.
Kasus-kasus ini memungkinkan instance memiliki jumlah elemen tingkat atas yang tidak diketahui, yang akan memperlakukan konten DOM sebagai sebuah fragmen. Contoh fragmen masih membuat konten dengan benar. Namun, ia tidak memiliki node root, $ EL menunjuk ke simpul jangkar, yaitu, simpul teks kosong (simpul komentar dalam mode pengembangan).
Tetapi yang lebih penting, instruksi kontrol non-proses, fitur non-prop dan transisi pada elemen komponen akan diabaikan karena tidak ada elemen root untuk mengikat:
<!-Tidak, karena tidak ada elemen root->
<contoh v-show = "ok" transition = "fade"> </example>
<!-Alat peraga ya->
<Contoh: prop = "somedata"> </example>
<!-Kontrol prosesnya ok, tetapi tidak ada transisi->
<Contoh v-if = "ok"> </example>
Tentu saja, instance fragmen memiliki kegunaannya, tetapi biasanya lebih baik untuk memberikan komponen pada simpul root. Ini memastikan bahwa instruksi dan kinerja khusus pada elemen komponen dikonversi dengan benar, dan kinerjanya juga sedikit lebih baik.
Template inline
Jika komponen anak memiliki properti inline-template, komponen akan memperlakukan kontennya sebagai templatnya alih-alih memperlakukannya sebagai konten distribusinya. Ini membuat template lebih fleksibel.
<my-component inline-template>
<p> Ini dikompilasi sebagai template komponen sendiri </p>
<p> bukan konten terjemahan orang tua. </p>
</spomponent>
Namun, inline-template membuat ruang lingkup template sulit dipahami dan tidak dapat menyimpan hasil kompilasi template. Praktik terbaik adalah menggunakan opsi template untuk menentukan templat dalam komponen.
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.