Berapa banyak komponen utama yang ada pada vue?

Vue mempunyai 4 komponen utama: 1. Komponen global Gunakan kaedah "app.component(...)" untuk mendaftarkan komponen global boleh digunakan dalam mana-mana templat komponen aplikasi. 2. Komponen tempatan ialah komponen yang didaftarkan dalam pilihan "komponen" bagi komponen (induk). 3. Komponen dinamik merujuk kepada komponen dengan nama yang berbeza yang diberikan berdasarkan nilai pengikatan yang berbeza kepada atribut tersebut. 4. Komponen tak segerak tidak dipaparkan serta-merta apabila halaman dimuatkan, sebaliknya, mereka menunggu sehingga beberapa logik perniagaan selesai sebelum melaksanakan logik dalam komponen dan memaparkannya ke halaman.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Komponen Vue pada asasnya adalah contoh dengan pilihan yang telah ditetapkan Kami menggunakan komponen yang kecil, bebas dan biasanya boleh digunakan semula, dipasang lapisan demi lapisan, dan akhirnya membentuk halaman yang lengkap.

Komponen mesti didaftarkan terlebih dahulu supaya aplikasi Vue boleh mengenalinya Terdapat dua jenis pendaftaran komponen:

<ul>

Pendaftaran global

Pendaftaran separa

.

Komponen global

(dalam komponen akar) menggunakan kaedah app.component('component-Name', {}) untuk mendaftar komponen global Komponen yang didaftarkan secara global boleh digunakan dalam templat mana-mana komponen dalam aplikasi . (Belajar perkongsian video: Tutorial pengenalan Vuejs, Video pengaturcaraan asas)

Parameter pertama ialah nama komponen, dan disyorkan untuk mengikuti W3C spesifikasi Nama komponen tersuai dalam (untuk mengelakkan konflik dengan elemen HTML semasa dan akan datang): huruf semuanya huruf kecil dan mesti mengandungi tanda sempang . Parameter kedua ialah pilihan konfigurasi komponen.

const app = Vue.createApp();
app.component('my-component', {
    template: `<h1>Hello World!</h1>`
});
const vm = app.mount(&#39;#app&#39;)

⚠️ Walaupun komponen global boleh digunakan dengan mudah dalam pelbagai komponen (termasuk dalaman mereka sendiri), ini boleh menyebabkan peningkatan dalam saiz projek semasa membinanya dan peningkatan yang tidak perlu dalam jumlah JavaScript dimuat turun oleh pengguna.

Perlu mendaftar komponen global app.mount('#app') sebelum aplikasi dipasang pada DOM

Komponen tempatan

Komponen dalam komponen (induk) Komponen yang didaftarkan dalam pilihan

. components

Sub-komponen

ini ditakrifkan oleh objek JavaScript biasa , yang menerima parameter yang sama seperti komponen global, tetapi ia hanya boleh digunakan dalam komponen induk , dipanggil komponen tempatan.

Untuk setiap sifat dalam objek

, componentsnama sifatnya ialah nama elemen tersuai dan nilai sifatnya ialah objek pilihan komponen ini.

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

// 然后在父组件的 `components` 选项中定义你想要使用的组件
const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Komponen dinamik

Komponen dinamik merujuk kepada komponen yang menghasilkan nama berbeza berdasarkan nilai pengikatan berbeza​​​kepada atribut itu.

Teg terbina dalam

digunakan untuk memaparkan komponen berbeza secara dinamik Dengan mengawal nilai parameter yang terikat pada atribut <component :is="componentName />" is, komponen yang sepadan dengan nama yang sama boleh menjadi. dipaparkan.

Atribut

boleh menjadi: is

<ul>Nama komponen berdaftar

objek pilihan bagi komponen

Kadangkala untuk menyimpan keadaan komponen dinamik semasa menukar, seperti nilai kotak input dalam komponen, anda boleh membalut komponen dinamik

dengan tag <keep-alive></keep-alive>. Atribut

juga boleh digunakan untuk menyelesaikan sekatan peraturan sarang elemen HTML, dan nilainya ialah nama komponen, supaya kandungan itu benar-benar dipaparkan oleh orang asli tag ialah komponen . is

Oleh kerana untuk elemen ini

, <ul>, <ol> dan <table>, terdapat sekatan ketat terhadap elemen anak langsung yang dibenarkan untuk diletakkan di dalamnya, dan membenamkan elemen lain akan dianggap tidak sah . Tetapi jika kita perlu menggunakan komponen sebagai elemen anak langsung dalam elemen ini, kita boleh menggunakan atribut <select> pada elemen anak "undang-undang" untuk menentukan kandungan sebenar yang akan diberikan Dalam kes ini, atribut is digunakan pada elemen HTML asli , seperti is yang nilainya <tr> perlu diawali dengan untuk menunjukkan bahawa apa yang dihuraikan sebenarnya adalah komponen Vue vue:

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

tetapi sekatan di atas hanya untuk menggunakan Vue secara langsung dalam HTML Anda akan menghadapinya hanya apabila menggunakan templat Jika anda menggunakan templat dalam langkah seterusnya, tiada sekatan sedemikian:

<ul>

字符串，例如 template: '...'

单文件组件 .vue

<script type="text/x-template">

异步组件

现在的大型网页往往需要异步获取不同的数据，Vue 有一个 defineAsyncComponent 方法定义异步组件，以优化应用的加载和用户体验。

异步组件在加载页面时并不立即渲染，而是要等带一些业务逻辑完成后，才会执行组件内的逻辑和渲染到页面上。

// 全局组件
app.component('async-example', Vue.defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    resolve({
      template: &#39;<div>I am async!</div>&#39;
    })
  })
}))

// 局部组件
import { createApp, defineAsyncComponent } from &#39;vue&#39;

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() => {
      return new Promise((resolve, reject) => {
        resolve({
          template: &#39;<div>I am async!</div>&#39;
        })
      })
    })
  }
})

异步组件的注册和一般的同步组件类似，如果是注册全局组件，也是使用 app.component()进行注册，不过第二个参数使用 Vue.defineAsyncComponent() 方法告诉 Vue 应用该组件是异步组件。

defineAsyncComponent() 方法的参数是一个匿名函数，而且函数是返回一个 Promise。在 Promise 内应该 resovlve({}) 一个对象，其中包含了构建组件相关配置参数。只有当 Promise resolve 或 reject 才执行异步组件的处理。

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci Berapa banyak komponen utama yang ada pada vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!