Combien de composants principaux vue possède-t-il ?

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

Composants locaux 🎜🎜Composants enregistrés dans l'option components d'un composant au sein d'un composant (parent). 🎜🎜Ces sous-composants sont définis par un objet JavaScript commun, qui reçoit les mêmes paramètres que les composants globaux, mais ils ne peuvent être utilisés que dans le composant parent, appelé Local composants. 🎜🎜Pour chaque propriété de l'objet components, son nom de propriété est le nom de l'élément personnalisé, et sa valeur de propriété est l'objet d'option de ce composant. 🎜

// 全局组件
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;
        })
      })
    })
  }
})

Copier après la connexion

Copier après la connexion

rrreee

Composants dynamiques🎜🎜Les composants dynamiques font référence à des composants qui restituent des noms différents en fonction des différentes valeurs de liaison à l'attribut. 🎜🎜La balise intégrée <component :is="componentName />" est utilisée pour afficher dynamiquement différents composants via une liaison de contrôle sur la propriété is affichera le composant correspondant portant le même nom. 🎜🎜L'attribut is peut être : 🎜🎜🎜Le nom d'un composant enregistré🎜🎜Objet Options🎜🎜🎜Parfois pour changer, pour sauvegarder l'état des composants dynamiques, tels que la valeur de la zone de saisie dans le composant, vous pouvez utiliser la balise <keep-alive></keep-alive> pour envelopper la dynamique composant. 🎜🎜L'attribut is peut également être utilisé pour résoudre les restrictions de règles d'imbrication des éléments HTML. Appliquez-le à la balise HTML native, et sa valeur est le nom du composant, de sorte que le contenu réel soit rendu par le. la balise native est constituée de composants. 🎜🎜Parce que pour <ul>, <ol>, <table> et <select> Pour ces éléments, il existe des restrictions strictes sur les éléments enfants directs autorisés à être placés à l'intérieur d'eux. Si d'autres éléments sont intégrés, ils seront considérés comme du contenu invalide et leur promotion vers l'extérieur entraînera des problèmes de rendu final. Mais si nous devons utiliser des composants comme éléments enfants directs dans ces éléments, nous pouvons utiliser l'attribut is sur les éléments enfants "légaux" pour spécifier le contenu réel à restituer. Dans ce cas, l'attribut. is< /code> est utilisé sur les éléments HTML natifs, tels que <tr>. Sa valeur doit être préfixée par vue: pour indiquer ce qui est. être analysé est en fait un composant Vue. 🎜🎜rrreee🎜Mais les restrictions ci-dessus ne seront rencontrées que lors de l'utilisation des modèles Vue directement en HTML. Si vous utilisez des modèles à l'étape suivante, il n'y aura pas de telles restrictions : 🎜<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;
        })
      })
    })
  }
})

Copier après la connexion

Copier après la connexion

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!