Panduan Pemula untuk Bekerja Dengan Komponen di Vue

seni bina komponen vue.js menjadikan membina antara muka pengguna yang cekap dan mudah. Ia membolehkan anda memecahkan aplikasi anda ke dalam komponen yang lebih kecil dan boleh diguna semula dan kemudian membina struktur yang lebih kompleks dengan komponen ini.

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

Nama komponen

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

ialah

. Ia boleh digunakan seperti ini: my-counter

Apabila menamakan komponen, anda boleh memilih untuk menggunakan kebab-case (

<code class="language-html"><div>
  <my-counter></my-counter>
</div></code>

) atau pascal-case (). Apabila merujuk komponen dalam templat, sama ada varian boleh digunakan, tetapi apabila merujuk komponen secara langsung di DOM (seperti yang ditunjukkan dalam contoh di atas), hanya nama tag

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.

Terdapat beberapa cara untuk menentukan templat komponen. Di atas kami menggunakan literasi templat, tetapi kami juga boleh menggunakan penanda dengan

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:

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

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

untuk mendaftarkan komponen untuk menunjukkan semua contoh.

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:

<code class="language-html"><div>
  <my-counter></my-counter>
</div></code>

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:

<code class="language-vue"><template>
  <div>{{ count }}</div>
</template>

</code>

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

. Oleh itu, templat HTML kami akan kelihatan seperti ini:

<code class="language-html"><blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></code>

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

, yang kami tentukan dalam komponen induk.

author-detail Untuk mengakses data ini, kita perlu mengisytiharkan prop dalam komponen

:

<code class="language-javascript">new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</code>

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:

<code class="language-html"><div>
  <author-detail :owner="author"></author-detail>
</div></code>

Jika kita lulus jenis prop yang salah, anda akan melihat ralat dalam konsol yang serupa dengan apa yang saya tunjukkan di bawah:

<code class="language-javascript">Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</code>

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

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional