Asas pembangunan VUE3: menggunakan lanjutan untuk mewarisi komponen

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, dan VUE3 ialah versi terkini rangka kerja Vue Berbanding dengan VUE2, VUE3 mempunyai prestasi yang lebih tinggi dan pengalaman pembangunan yang lebih baik, dan telah menjadi pilihan pertama banyak pembangun. . Dalam VUE3, menggunakan extends untuk mewarisi komponen ialah kaedah pembangunan yang sangat praktikal Artikel ini akan memperkenalkan cara menggunakan extends untuk mewarisi komponen.

1. Apakah extends?

Dalam Vue, extends ialah atribut yang sangat praktikal Ia boleh digunakan untuk komponen anak untuk mewarisi pilihan komponen induk Contohnya, templat ditakrifkan dalam komponen induk dan melaluinya memanjangkan atribut jika diberikan kepada subkomponen, templat boleh digunakan secara langsung dalam subkomponen tanpa mentakrifkannya semula. Kaedah pewarisan ini boleh merealisasikan penggunaan semula kod, mengurangkan jumlah kod, dan meningkatkan kecekapan pembangunan.

2. Bagaimana untuk menggunakan extends?

Pertama, kita perlu mentakrifkan komponen induk, mentakrifkan templat dan menyimpannya sebagai fail berasingan, contohnya HelloWorld.vue:

<template>
  <div>
    <h1>Hello, {{name}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'Vue3'
    },
    content: {
      type: String,
      default: 'Welcome to Vue3'
    }
  }
}
</script>

Dalam komponen induk, kita Templat perlu dihantar kepada komponen anak melalui atribut extends dan templat yang ditentukan disimpan sebagai fail Mixins.js, sebagai contoh:

export default {
  extends: HelloWorld    //继承HelloWorld.vue
}

HelloWorld berikut ialah nama komponen yang kami takrifkan dalam komponen induk .

Seterusnya, kita perlu memperkenalkan Mixins.js ke dalam komponen anak dan gunakan lanjutan untuk mewarisi pilihan komponen induk dan simpannya sebagai fail berasingan, seperti App.vue:

<template>
  <div>
    <HelloWorld />    //使用extends继承HelloWorld.vue的模板
    <p>{{message}}</p>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Mixins from './Mixins'

export default {
  mixins: [Mixins],    //引入Mixins.js
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'This is App.vue'
    }
  }
}
</script>

Gunakan Atribut mixins mengimport Mixins.js dan menggunakan komponen dalam templat. Akhir sekali, kita perlu menjadikan App.vue subkomponen ke dalam komponen akar aplikasi Vue, contohnya:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3. Ringkasan

Menggunakan lanjutan untuk mewarisi komponen ialah kaedah pembangunan yang sangat praktikal boleh membantu kami mencapai penggunaan semula kod dan meningkatkan kecekapan pembangunan. Dalam VUE3, penggunaan atribut extends adalah sangat mudah Anda hanya perlu menentukan templat dan hubungan warisan dalam komponen induk dan komponen anak. Saya harap artikel ini dapat membantu pembangun dan menjadikan mereka lebih selesa dalam menggunakan pembangunan VUE3.

Atas ialah kandungan terperinci Asas pembangunan VUE3: menggunakan lanjutan untuk mewarisi komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!