Bagaimana untuk membina komponen vue

Vue ialah rangka kerja JavaScript yang sangat popular yang menyediakan platform yang berkuasa untuk membina aplikasi web. Komponen ialah salah satu ciri yang paling penting dan berkuasa bagi Vue Ia membolehkan kami membahagikan aplikasi yang kompleks kepada bahagian hadapan yang boleh diguna semula, menjadikan pembangunan lebih cekap dan lebih mudah.

Jadi bagaimana anda boleh membina komponen Vue? Artikel ini akan menunjukkan kepada anda pengetahuan asas, kaedah penubuhan dan amalan terbaik komponen Vue.

Pengetahuan asas komponen Vue

Mula-mula kita perlu memahami beberapa pengetahuan asas tentang pembangunan komponen Vue.

Takrifan komponen

Terdapat dua cara untuk menentukan komponen dalam Vue:

Satunya ialah pendaftaran global, yang mentakrifkan komponen dalam contoh Vue global:

Vue.component('component-name', {
  // 组件的选项
})

Kami boleh menggunakan komponen ini dalam mana-mana contoh Vue, termasuk komponen lain.

Yang kedua ialah pendaftaran tempatan, yang mentakrifkan komponen dalam pilihan komponen semasa:

new Vue({
  el: '#app',
  components: {
    'component-name': {
      // 组件的选项
    }
  }
})

Komponen hanya boleh digunakan dalam contoh semasa.

Templat Komponen

Cara untuk menentukan templat komponen adalah lebih fleksibel Anda boleh menggunakan rentetan templat HTML atau terus menggunakan fungsi Render.

Vue.component('component-name', {
  template: '<div>组件模板</div>'
})

Vue.component('component-name', {
  render: function(h) {
    return h('div', '组件模板')
  }
})

Adalah disyorkan untuk menggunakan rentetan templat HTML kerana ia lebih intuitif dan lebih mudah dibaca.

Sifat komponen

Komponen boleh mempunyai sifat input dan output (props) ialah data yang mengalir daripada komponen induk kepada komponen anak, dan sifat output ialah komponen anak yang menyampaikan data kepada. komponen induk.

Vue.component('component-name', {
  props: ['prop-name'],
  template: '<div>{{ prop-name }}</div>'
})

Apabila menggunakan komponen dalam komponen induk, atribut input boleh dihantar melalui atribut HTML (perhatikan bahawa nama atribut menggunakan "kebab-case").

<component-name prop-name="属性值"></component-name>

Dalam komponen kanak-kanak, akses harta ini melalui this.propName.

Kitaran hayat komponen

Kitaran hayat komponen Vue merujuk kepada keseluruhan proses daripada penciptaan kepada pemusnahan contoh komponen, termasuk peringkat penciptaan, pemasangan, pengemaskinian dan pemusnahan.

Kitaran hayat komponen boleh didaftarkan dengan cangkuk berikut:

Vue.component('component-name', {
  created: function() {
    // 组件创建时调用，可以在这里初始化数据
  },
  mounted: function() {
    // 将组件挂载到DOM后调用，可以在这里访问DOM节点
  },
  updated: function() {
    // 组件更新时调用，可以在这里修改数据
  },
  destroyed: function() {
    // 组件销毁时调用，可以在这里清理一些无用的数据和资源
  }
})

Cara membina komponen Vue

Setelah memahami pengetahuan asas, seterusnya kami akan menerangkan bagaimana untuk membina komponen Vue.

1. Tentukan nama komponen

Pertama, kita perlu tentukan nama komponen yang hendak dibangunkan. Nama ini bukan sahaja nama komponen dalam contoh Vue, tetapi juga nama apabila kami membungkusnya dan menerbitkannya ke dalam perpustakaan komponen awam.

Nama komponen dalam Vue boleh menggunakan format "kebab-case" atau "camelCase". Adalah disyorkan untuk menggunakan format "kebab-case" kerana ia lebih mudah dibaca.

2. Cipta fail komponen

Buat fail komponen dan tentukan komponen.

<template>
  <div>
    组件模板
  </div>
</template>

<script>
export default {
  name: 'component-name',
  props: {
    propName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 组件的数据
    }
  },
  methods: {
    // 组件的方法
  },
  mounted() {
    // 组件挂载到DOM后执行的方法
  }
}
</script>

<style scoped>
/* 组件的样式 */
</style>

Gunakan borang komponen fail tunggal Vue untuk menentukan templat komponen, skrip dan gaya dalam fail yang sama untuk pengurusan yang mudah.

3. Eksport komponen

Selepas komponen ditakrifkan, eksportnya untuk digunakan di tempat lain.

import MyComponent from './MyComponent.vue'
export default MyComponent

Amalan Terbaik

Akhir sekali, mari kita kongsikan beberapa amalan terbaik untuk pembangunan komponen Vue.

1. Konvensyen penamaan komponen: Penamaan hendaklah sedeskriptif yang mungkin, menerangkan tujuan dan ciri komponen, sambil mengelakkan konflik atau nama pendua.
2. Sediakan dokumentasi untuk komponen: Komponen harus mempunyai dokumentasi yang jelas dan ringkas, termasuk cara menggunakan komponen dan dokumentasi API, supaya orang lain boleh menggunakan dan memahaminya.
3. Prinsip fungsi tunggal: Setiap komponen hendaklah hanya mempunyai satu fungsi yang jelas dan jelas, dan fungsi ini hendaklah bebas dan boleh digunakan semula yang mungkin.
4. Pengenkapsulan gaya komponen: Gaya komponen hendaklah dikapsulkan di dalam komponen sebanyak mungkin, menggunakan gaya berskop untuk mengurangkan definisi berulang.
5. Gunakan teg tutup sendiri: Cuba gunakan teg tutup sendiri untuk mengurangkan ralat.
6. Gunakan arahan v-bind lalai: Gunakan arahan lalai untuk mengelakkan memusnahkan sifat input komponen, seperti $props dan $attrs.
7. Memuatkan atas permintaan: Sesetengah komponen mungkin tidak digunakan dengan kerap Kami boleh memuatkannya secara dinamik apabila diperlukan untuk meningkatkan kelajuan pemuatan skrin pertama.

Kesimpulan

Artikel ini memperkenalkan pengetahuan asas, kaedah pembinaan dan amalan terbaik komponen Vue. Komponen Vue ialah ciri yang sangat berkuasa bagi rangka kerja Vue, yang boleh merealisasikan penggunaan semula kod dan pembangunan komponen. Melalui kajian dan amalan artikel ini, saya percaya anda boleh menggunakan komponen Vue dengan lebih baik untuk membina aplikasi web boleh guna semula, berskala dan mudah diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk membina komponen vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!