Panduan ini akan memberi anda pengenalan lanjutan kepada komponen VUE. Kami akan meneroka cara membuat komponen, bagaimana untuk lulus data antara komponen (melalui props dan bas acara), dan bagaimana untuk menjadikan kandungan tambahan dalam komponen menggunakan elemen
Vue. Setiap contoh akan datang dengan demo codepen runnable. <slot></slot>
mata utama
- Seni bina komponen Vue membantu memecahkan UI ke dalam coretan yang boleh diguna semula, mudah dikendalikan, dengan itu meningkatkan kebolehgunaan semula dan organisasi kod.
- Komponen boleh dibuat secara global menggunakan
- atau secara tempatan dalam komponen-fail satu-fail.
Vue.component Data boleh diluluskan kepada subkomponen menggunakan prop, menyediakan cara yang jelas dan berstruktur untuk mengurus dan lulus data dalam pokok komponen. - Bas acara boleh digunakan untuk mengurus komunikasi secara berkesan dari komponen kanak -kanak ke komponen induk, yang membolehkan komponen kanak -kanak menghantar data kembali ke hierarki komponen.
- elemen
- Vue membantu kandungan sarang dalam komponen, menjadikannya lebih fleksibel dan dapat menerima kandungan dari komponen induk, yang dapat ditimpa dengan kandungan sandaran.
<slot></slot>
bagaimana membuat komponen dalam vue
Komponen pada dasarnya adalah contoh yang boleh digunakan semula dengan nama. Terdapat banyak cara untuk membuat komponen dalam aplikasi VUE. Sebagai contoh, dalam projek kecil dan sederhana, anda boleh mendaftarkan komponen global menggunakan kaedah seperti berikut: Vue.component
Vue.component('my-counter', {
data() {
return {
count: 0
}
},
template: `<div>{{ count }}</div>`
})
new Vue({ el: '#app' }) ialah . Ia boleh digunakan seperti ini: my-counter
<div> <my-counter></my-counter> </div>) atau pascal-case (
kebab yang sah. my-custom-component
MyCustomComponent anda juga dapat melihat bahawa dalam contoh di atas, adalah fungsi yang mengembalikan objek literal (bukannya objek literal itu sendiri). Tujuannya adalah untuk membiarkan setiap contoh komponen mempunyai objek data sendiri tanpa perlu berkongsi contoh global dengan semua contoh lain.
atau templat di dalam DOM. Anda boleh membaca lebih lanjut mengenai cara yang berbeza untuk menentukan templat di sini. data
komponen fail tunggal text/x-template
Dalam projek yang lebih kompleks, komponen global dengan cepat boleh menjadi sukar untuk dikendalikan. Dalam kes ini, masuk akal untuk merancang aplikasi anda untuk menggunakan komponen fail tunggal. Seperti namanya, ini adalah fail tunggal dengan sambungan .vue yang mengandungi <template></template>,
dan komponen mycounter mungkin kelihatan seperti ini:
Vue.component('my-counter', {
data() {
return {
count: 0
}
},
template: `<div>{{ count }}</div>`
})
new Vue({ el: '#app' })
seperti yang anda lihat, apabila menggunakan komponen fail tunggal, anda boleh mengimport dan menggunakannya secara langsung dalam komponen yang memerlukannya.
Vue.component() Dalam panduan ini, saya akan menggunakan kaedah
Menggunakan komponen fail tunggal sering melibatkan langkah-langkah bangunan (contohnya, menggunakan Vue CLI). Jika anda ingin mengetahui lebih lanjut, lihat "Vue CLI Gets Stare Guide" dalam siri Vue ini.
pemindahan data ke komponen melalui props
Props membolehkan kita lulus data dari komponen induk ke komponen kanak -kanak. Ini membolehkan komponen kami dibahagikan kepada ketulan yang lebih kecil untuk mengendalikan fungsi tertentu. Sebagai contoh, jika kita mempunyai komponen blog, kita mungkin ingin memaparkan maklumat seperti butiran pengarang, butiran pos (tajuk, badan, dan imej), dan komen.
kita boleh memecahkannya ke dalam komponen kanak -kanak supaya setiap komponen memproses data tertentu, menjadikan pokok komponen kelihatan seperti ini:
<div> <my-counter></my-counter> </div>
Jika anda masih tidak percaya pada manfaat menggunakan komponen, luangkan masa untuk menyedari betapa bergunanya gabungan ini. Sekiranya anda ingin meninjau semula kod ini pada masa akan datang, anda akan segera jelas bagaimana halaman dibina dan di mana anda perlu mencari fungsi mana (iaitu komponen yang mana). Cara deklaratif untuk menggabungkan antara muka juga menjadikannya lebih mudah bagi mereka yang tidak biasa dengan asas kod untuk memulakan dengan cepat dan meningkatkan kecekapan.
kerana semua data akan diluluskan dari komponen induk, ia mungkin kelihatan seperti ini:
<template>
<div>{{ count }}</div>
</template>
<🎜>
author-detail Dalam komponen contoh di atas, kami menentukan butiran pengarang dan menyiarkan maklumat. Seterusnya, kita perlu membuat komponen kanak -kanak. Mari namakan komponen kanak -kanak
<blogpost> <authordetails></authordetails> <postdetails></postdetails> <comments></comments> </blogpost>
owner Kami lulus objek pengarang kepada komponen kanak -kanak sebagai props bernama owner. Terdapat keperluan untuk memberi perhatian kepada perbezaan di sini. Dalam komponen kanak -kanak, author adalah nama prop yang kami terima data dari komponen induk. Data yang kami mahu terima dipanggil
author-detail Untuk mengakses data ini, kita perlu mengisytiharkan prop dalam komponen
new Vue({
el: '#app',
data() {
return {
author: {
name: 'John Doe',
email: 'jdoe@example.com'
}
}
}
})
Kami juga boleh mengaktifkan pengesahan apabila melepasi prop untuk memastikan data yang betul diluluskan. Ini serupa dengan proptypes dalam React. Untuk membolehkan pengesahan dalam contoh di atas, ubah komponen kami untuk kelihatan seperti ini:
<div> <author-detail :owner="author"></author-detail> </div>
Jika kita lulus jenis prop yang salah, anda akan melihat ralat dalam konsol yang serupa dengan apa yang saya tunjukkan di bawah:
Vue.component('author-detail', {
template: `
<div>
<h2 id="owner-name">{{ owner.name }}</h2>
<p>{{ owner.email }}</p>
</div>
`,
props: ['owner']
})
Terdapat panduan rasmi dalam dokumentasi VUE yang boleh anda gunakan untuk memahami pengesahan prop.
Komunikasi dari komponen kanak -kanak ke komponen induk melalui bas acara
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
