Bermula dengan Pembangunan VUE3: Menggunakan Komponen

Vue kini merupakan rangka kerja JavaScript yang popular, terutamanya popular dalam pembangunan aplikasi web. Dengan keluaran versi VUE3, VUE bukan sahaja mempunyai kelebihan sebelumnya, tetapi juga menambah beberapa ciri baharu, seperti pengaturcaraan berorientasikan objek dan peningkatan prestasi. Artikel ini akan memperkenalkan cara menggunakan komponen dalam VUE3 dan cara menggunakan komponen untuk membina halaman web yang ringkas.

Apakah komponen VUE?

Komponen VUE ialah modul kod boleh guna semula yang digunakan untuk mencipta antara muka pengguna. Setiap komponen mengandungi kod HTML, JavaScript dan CSS dan boleh digunakan secara langsung dalam kod sebagai satu entiti.

Ambil komponen butang ringkas sebagai contoh:

<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
</style>

Komponen butang ini mempunyai butang propertiTeks untuk teks yang dipaparkan pada butang. Apabila menggunakan komponen, anda perlu lulus atribut ini. Berikut ialah kod sampel yang menggunakan komponen ini:

<template>
  <div>
    <MyButton buttonText="Click me!" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

Di sini komponen diperkenalkan ke dalam Vue dan kemudian digunakan dalam templat.

Buat dan gunakan komponen

Untuk mencipta komponen baharu, anda perlu menggunakan kaedah Vue.component() yang disediakan oleh Vue. Kaedah ini menerima dua parameter: nama komponen dan objek yang mentakrifkan komponen. Berikut ialah contoh komponen paling mudah:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

Dalam coretan kod ini, semua kod lain kecuali nama komponen ditakrifkan dalam objek. Pembolehubah komponen biasanya ditakrifkan menggunakan kaedah idiomatik, seperti menggunakan huruf besar dalam nama kelas untuk membezakan komponen daripada penanda HTML biasa.

Perkenalkan komponen ke dalam Vue:

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

Komponen kini boleh digunakan dalam templat.

Menggunakan komponen dalam VUE3

VUE3 menyediakan cara yang lebih baik untuk mencipta dan menggunakan komponen. Dalam VUE3, gunakan kaedah createApp untuk mencipta aplikasi Vue dan gunakan kaedah app.component() untuk mendaftarkan komponen. Berikut ialah contoh kod:

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')
</script>

Dalam kod di atas, kaedah createApp digunakan untuk mencipta aplikasi Vue dan app.component() digunakan untuk mendaftarkan komponen. Baris terakhir kod digunakan untuk memasang aplikasi ke dalam dokumen HTML.

Melalui parameter komponen

Seperti yang dinyatakan di atas, penggunaan biasa komponen dalam VUE adalah untuk menghantar sifat dan peristiwa. Contohnya, dalam coretan kod berikut:

<MyComponent :width="200" @clicked="onClick" />

atribut lebar akan dihantar kepada komponen, acara yang diklik dicetuskan apabila komponen diklik dan onClick di sini ialah pengendali acara.

Untuk menggunakan sifat dan peristiwa yang diluluskan dalam komponen, anda perlu menggunakan prop dan kaedah pancaran yang disediakan oleh VUE. Contohnya:

<template>
  <div :style="{ width: width + 'px' }" @click="$emit('clicked')">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    width: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

Dalam komponen, sifat diisytiharkan sebagai sebahagian daripada objek props. Secara lalai, prop adalah dari sebarang jenis. Dalam contoh ini, atribut lebar ditakrifkan sebagai jenis nombor dan diberikan nilai lalai 100. Dalam templat, lebar dilalui dan digunakan untuk mengemas kini gaya komponen.

Menggunakan acara dalam komponen adalah sangat mudah, hanya gunakan kaedah $emit untuk memanggil acara. Dalam contoh ini, acara yang diklik dipanggil apabila pengguna mengklik pada komponen.

Ringkasan

Vue ialah rangka kerja JavaScript yang berkuasa dan sistem komponennya ialah bahagian penting dalam membina aplikasi web boleh guna semula dan boleh skala. Artikel ini memperkenalkan cara menggunakan Vue untuk mencipta dan menggunakan komponen, menggunakan kaedah createApp dalam Vue3 untuk mencipta aplikasi Vue dan menggunakan kaedah app.component() untuk mendaftar komponen. Komponen boleh menggunakan prop dan kaedah memancarkan untuk menghantar sifat dan acara. Saya harap artikel ini akan membantu pembangun yang ingin mempelajari VUE.

Atas ialah kandungan terperinci Bermula dengan Pembangunan VUE3: Menggunakan Komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!