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

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Salin selepas log masuk

ialah

. Ia boleh digunakan seperti ini: my-counter

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

<div>
  <my-counter></my-counter>
</div></pre>
Salin selepas log masuk

) 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>, </pre>

dan komponen mycounter mungkin kelihatan seperti ini:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Salin selepas log masuk

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:

<div>
  <my-counter></my-counter>
</div></pre>
Salin selepas log masuk

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>

<🎜></pre>
Salin selepas log masuk

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:

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
Salin selepas log masuk

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

:

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>
Salin selepas log masuk

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></pre>
Salin selepas log masuk

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']
})</pre>
Salin selepas log masuk

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

<script></code> 和 <code>&lt;style&gt;</code> 部分。</p> <p>对于上面的示例，App 组件可能如下所示：</p> <pre class="brush:php;toolbar:false"><code class="vue">&lt;template&gt; <div> <my-counter></my-counter> </div> </template> <script> import myCounter from './components/myCounter.vue' export default { name: 'app', components: { myCounter } } </script>

Acara dikendalikan dengan membuat kaedah pembalut yang dicetuskan apabila peristiwa yang dipilih berlaku. Untuk mengkaji semula, mari berkembang berdasarkan contoh kaunter awal kami supaya ia meningkat setiap kali butang diklik.

Komponen kami sepatutnya kelihatan seperti ini:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Salin selepas log masuk

dan templat kami:

<div>
  <my-counter></my-counter>
</div></pre>
Salin selepas log masuk

Harapan ini cukup mudah. Seperti yang anda lihat, kami menyambung ke acara onClick untuk mencetuskan kaedah increase adat setiap kali butang diklik. Kaedah increase kemudian meningkatkan atribut data count kami. Sekarang mari kita memperluaskan contohnya, gerakkan butang kaunter ke dalam komponen yang berasingan dan paparkan kiraan dalam komponen induk. Kita boleh melakukan ini menggunakan bas acara.

Bas acara sangat mudah apabila anda ingin berkomunikasi dari komponen kanak -kanak ke komponen induk. Ini bertentangan dengan kaedah komunikasi lalai, yang berasal dari komponen induk kepada komponen kanak -kanak. Jika permohonan anda tidak cukup besar untuk tidak memerlukan Vuex, anda boleh menggunakan bas acara. (Anda boleh membaca lebih lanjut mengenainya dalam "Panduan Bermula Vuex" dalam siri Vue ini.)

Jadi apa yang perlu kita lakukan ialah: kiraan akan diisytiharkan dalam komponen induk dan diturunkan kepada komponen kanak -kanak. Kemudian dalam komponen kanak -kanak, kami ingin meningkatkan nilai count dan pastikan nilai dalam komponen induk dikemas kini.

Komponen aplikasi akan kelihatan seperti ini:

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
Salin selepas log masuk

Kemudian dalam komponen kanak -kanak, kami ingin menerima kiraan melalui alat peraga dan mempunyai cara untuk meningkatkannya. Kami tidak mahu memaparkan nilai count dalam komponen kanak -kanak. Kami hanya mahu bertambah dari komponen kanak -kanak dan menjadikannya mencerminkan komponen induk:

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
Salin selepas log masuk

maka templat kami akan kelihatan seperti ini:

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>
Salin selepas log masuk

Jika anda cuba meningkatkan nilai seperti itu, ia tidak akan berfungsi. Agar ia berfungsi, kita perlu mengeluarkan acara dari komponen kanak -kanak, menghantar nilai baru count, dan juga mendengar acara ini dalam komponen induk.

Pertama, kami membuat contoh Vue baru dan menetapkannya kepada eventBus:

<div>
  <author-detail :owner="author"></author-detail>
</div></pre>
Salin selepas log masuk

kini boleh menggunakan bas acara dalam komponen kami. Subkomponen akan kelihatan seperti ini:

Vue.component('author-detail', {
  template: `
    <div>
      <h2 id="owner-name">{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</pre>
Salin selepas log masuk

peristiwa setiap kali kaedah increment dipanggil. Kita perlu mendengar acara itu dalam komponen utama dan menetapkan count kepada nilai yang kita dapat dari acara yang dipancarkan:

Vue.component('author-detail', {
  template: `
    <div>
      <h2 id="owner-name">{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})</pre>
Salin selepas log masuk

Perhatikan bahawa kami menggunakan kaedah Lifecycle created Vue untuk menyambung ke komponen sebelum dipasang dan menubuhkan bas acara.

Jika permohonan anda tidak kompleks, menggunakan bas acara adalah baik, tetapi ingat bahawa apabila aplikasi anda berkembang, anda mungkin mahu menggunakan VUEX sebaliknya.

Gunakan kandungan dalam komponen bersarang slot

Dalam contoh-contoh yang telah kita lihat setakat ini, komponen adalah unsur-unsur penutup diri. Walau bagaimanapun, untuk mewujudkan komponen yang boleh dikumpulkan bersama dengan cara yang berguna, kita perlu bersarang dengan satu sama lain seperti yang kita lakukan dengan elemen HTML.

Jika anda cuba menggunakan komponen dengan tag akhir dan letakkan beberapa kandungan di dalamnya, anda akan melihat bahawa Vue hanya menelannya. Apa -apa sahaja di antara tag permulaan dan akhir komponen akan digantikan dengan output rendering komponen itu sendiri:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Salin selepas log masuk

bernasib baik, slot Vue memungkinkan untuk lulus nilai sewenang -wenang kepada komponen. Ini boleh menjadi apa -apa dari komponen induk ke komponen kanak -kanak, dari elemen DOM ke data lain. Mari lihat bagaimana mereka berfungsi.

Bahagian skrip komponen

akan kelihatan seperti ini:

<div>
  <my-counter></my-counter>
</div></pre>
Salin selepas log masuk

maka templat akan kelihatan seperti ini:

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
Salin selepas log masuk

Kandungan dalam komponen

<list> akan diberikan antara label elemen <slot>. Kami juga boleh menggunakan kandungan sandaran sekiranya komponen induk tidak menyuntik apa -apa.

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
Salin selepas log masuk

Jika tiada kandungan dari komponen induk, kandungan sandaran akan diberikan.

Kesimpulan

Ini adalah pengenalan peringkat tinggi untuk menggunakan komponen dalam Vue. Kami melihat bagaimana untuk membuat komponen di Vue, bagaimana untuk berkomunikasi dari ibu bapa kepada komponen kanak -kanak melalui prop, dan bagaimana untuk berkomunikasi dari komponen kanak -kanak ke ibu bapa ke atas bas acara. Kami kemudiannya dengan melihat slot, cara yang mudah untuk menggabungkan komponen dengan cara yang berguna. Saya harap anda dapati tutorial ini berguna.

(bahagian FAQs ditinggalkan kerana terlalu lama dan tidak sepadan dengan matlamat asal pseudo. Beberapa kandungan FAQ boleh ditulis semula seperti yang diperlukan, tetapi niat asal mesti tidak berubah.)

Atas ialah kandungan terperinci Panduan Pemula untuk Bekerja Dengan Komponen di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!