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

Vue comporte 4 composants principaux : 1. Composants globaux Utilisez la méthode "app.component(...)" pour enregistrer les composants globaux qui peuvent être utilisés dans n'importe quel modèle de composant de l'application. 2. Les composants locaux sont des composants enregistrés dans l'option "components" d'un composant (parent). 3. Les composants dynamiques font référence à des composants avec des noms différents qui sont rendus en fonction des différentes valeurs de liaison​​à l'attribut. 4. Les composants asynchrones ne s'affichent pas immédiatement lorsque la page est chargée. Au lieu de cela, ils attendent qu'une certaine logique métier soit terminée avant d'exécuter la logique dans le composant et de la restituer sur la page.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Le composant de Vue est essentiellement une instance avec des options prédéfinies. Nous utilisons de petits composants indépendants et généralement réutilisables, qui sont assemblés couche par couche pour finalement former une page complète.

Les composants doivent d'abord être enregistrés pour que l'application Vue puisse les reconnaître. Il existe deux types d'enregistrement de composants :

• Inscription globale
• Inscription locale

Composant global

(dans le composant racine) en utilisant la méthode . app.component('component-Name', {}) pour enregistrer les composants globauxapp.component('component-Name', {}) 来注册全局组件，全局注册的组件可以在应用中的任何组件的模板中使用。（学习视频分享：vuejs入门教程、编程基础视频）

其中第一个参数时组件名，推荐遵循 W3C 规范中的自定义组件名（避免与当前以及未来的 HTML 元素发生冲突）：字母全小写且必须包含一个连字符。第二个参数是组件的配置选项。

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

⚠️ 全局组件虽然可以方便地在各种组件中使用（包括其各自的内部），但是这可能造成构建项目时体积增大，用户下载 JavaScript 的无谓增加。

需要在app.mount('#app') 应用挂载到 DOM 之前进行全局组件的注册

局部组件

在一个（父）组件中组件的 components 选项中注册的组件。

这些子组件通过一个普通的 JavaScript 对象来定义，其接收的参数和全局组件一样，但是它们只能在该父组件中使用，称为局部组件。

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

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

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

动态组件

动态组件指根据给属性 is绑定值的不同来渲染不同名称的组件。

内置的标签 9dffaea1a1a8b4cfb6f03808bcbc9c35" 用以动态显式不同的组件，通过控制绑定在属性 is 上的参数值，即可显示相应的同名组件。

属性 is 可以是：

• 已注册组件的名字
• 一个组件的选项对象

有时候为了在切换时，保存动态组件的状态，例如组件中的输入框的值，可以用标签 7c9485ff8c3cba5ae9343ed63c2dc3f776c72b6c0750de65f93a5445ee8cabd8 包裹动态组件。

属性 is 还可以用于解决 HTML 元素嵌套的规则限制，将它应用到原生的 HTML 标签上，它的值就是组件名，这样原生标签实际渲染出来的内容就是组件。

因为对于 ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、f5d188ed2c074f8b944552db028f98a1 和 221f08282418e2996498697df914ce4e 这些元素，其内部允许放置的直接子元素是有严格限制的，如果嵌入其他元素会被视为无效的内容，而提升到外部造成最终渲染问题。但如果我们需要在这些元素中使用组件作为直接子元素，则可以在「合法」的子元素上使用属性 is，指定渲染的实际内容，这时属性 is 用在原生的 HTML 元素上，如 a34de1251f0d9fe1e645927f19a896e8 其值 需要使用 vue: Les composants enregistrés globalement peuvent être utilisés dans le modèle de n'importe quel composant de l'application. (Partage de vidéos d'apprentissage : tutoriel d'introduction à Vuejs, Vidéo sur les bases de la programmation)

Le premier paramètre est le nom du composant, il est recommandé de suivre Nom du composant personnalisé issu de la spécification W3C (pour éviter les conflits avec les éléments HTML actuels et futurs) : lettrestoutes en minuscules et doit contenir un trait d'union. Le deuxième paramètre concerne les options de configuration du composant.

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

⚠️ Bien que les composants globaux puissent être facilement utilisés dans divers composants (y compris leurs propres composants internes), cela peut entraîner une augmentation de la taille du projet lors de sa construction et une augmentation inutile de la quantité de JavaScript téléchargée par les utilisateurs. 🎜🎜Besoin d'enregistrer les composants globaux avant que l'application app.mount('#app') se monte sur DOM🎜

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;
        })
      })
    })
  }
})

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 e9780e2c3bd5df1b2b95e629ba2e22d0" 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 7c9485ff8c3cba5ae9343ed63c2dc3f776c72b6c0750de65f93a5445ee8cabd8 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 ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, f5d188ed2c074f8b944552db028f98a1 et 221f08282418e2996498697df914ce4e 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 est utilisé sur les éléments HTML natifs, tels que <code>a34de1251f0d9fe1e645927f19a896e8. 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 : 🎜

• 字符串，例如 template: '...'
• 单文件组件 .vue
• 91bc4aaf1732b26c8e5fcf53781ed1a6

异步组件

现在的大型网页往往需要异步获取不同的数据，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入门教程、编程基础视频）

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!