Premiers pas avec le développement VUE3 : chargement et enregistrement dynamiques à l'aide de composants

VUE3 est actuellement l'un des frameworks front-end les plus populaires. Il a attiré de plus en plus de développeurs grâce à sa facilité d'utilisation, sa flexibilité, son optimisation des performances et d'autres avantages. Dans VUE3, l'utilisation de composants est une opération très courante, mais comme les grands projets peuvent nécessiter un chargement et un enregistrement dynamiques des composants, dans cet article, nous présenterons comment utiliser des composants pour charger et enregistrer dynamiquement.

Tout d'abord, nous devons comprendre comment les composants sont enregistrés dans VUE3. Dans VUE3, les composants peuvent être enregistrés à l'aide de littéraux d'objet ou à l'aide de la méthode Vue.createApp. Voici un exemple simple de composant personnalisé :

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

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

Ce composant reçoit une propriété nommée "message", qui doit être de type chaîne, sinon une erreur sera signalée. Voyons maintenant comment charger et enregistrer dynamiquement des composants.

Chargement dynamique des composants

Le chargement dynamique des composants signifie que lorsque nous exécutons l'application, le composant est chargé dynamiquement uniquement lorsqu'il est vraiment nécessaire. Cela peut améliorer les performances et la réactivité de votre application.

VUE3 fournit la fonctionnalité de composants asynchrones. Les composants peuvent être définis comme des composants asynchrones puis chargés en cas de besoin. Voici un exemple de composant asynchrone :

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

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

Lors de l'utilisation d'un composant asynchrone, nous devons définir le composant comme une fonction asynchrone. Dans cette fonction, nous pouvons utiliser import() pour charger le composant de manière asynchrone et renvoyer le composant une fois le chargement terminé.

Ce qui suit est un exemple d'enregistrement de composant asynchrone plus complet :

<template>
  <div>
    <h1>Welcome to my app!</h1>
    <async-component :message="message" />
  </div>
</template>

<script>
  const AsyncComponent = () => ({
    // 加载异步组件
    component: import('./AsyncComponent.vue'),
    // 显示加载中
    loading: LoadingComponent,
    // 显示加载错误
    error: ErrorComponent,
    // 展示组件
    delay: 200,
    // 如果组件定义了名字，则可以直接使用这个字面量
    // name: 'my-component-name'
  })

  export default {
    components: {
      AsyncComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

Dans cet exemple, nous utilisons la méthode de chargement dynamique des composants asynchrones Vue, définissons d'abord un composant asynchrone, puis utilisons sa méthode pour le restituer dans le modèle. Puisque AsyncComponent n'est qu'une fonction, nous n'avons pas besoin de charger le composant lorsque le composant est initialisé, il sera chargé automatiquement en cas de besoin.

Lors de la définition d'AsyncComponent, nous pouvons spécifier une fonction avec une valeur de retour promise comme propriété du composant pour charger le composant de manière asynchrone. Si votre composant nécessite certains composants préchargés, vous pouvez spécifier les noms de ces composants à l'aide des options de chargement et d'erreur. Une fois le composant chargé avec succès, nous pouvons utiliser l'option delay pour spécifier un délai avant le rendu du composant réel.

Enregistrement des composants

Dans VUE3, nous pouvons enregistrer des composants en utilisant l'enregistrement global ou l'enregistrement local. La différence entre les deux réside dans le fait que le composant est enregistré comme global ou limité au parent de ce composant.

Grâce à l'enregistrement global, vous pouvez utiliser des composants dans toute l'application, tandis que l'enregistrement local ne peut être utilisé qu'entre les composants parents et les composants enfants. Voici un exemple d'un composant enregistré globalement et d'un composant enregistré localement :

Enregistrement global d'un composant

La façon d'enregistrer globalement un composant consiste à monter le composant sur l'option composants de l'objet Vue. Voici un exemple. d'un enregistrement global d'un composant :

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

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

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

In Dans cet exemple, nous importons le composant MyComponent et le plaçons dans l'option composants de l'instance Vue, puis utilisons my-component dans le modèle pour l'afficher.

Composants partiellement enregistrés

Les composants partiellement enregistrés ne peuvent être utilisés que dans le composant actuel et ses sous-composants. Voici un exemple d'enregistrement local d'un composant :

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

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

  export default {
    components: {
      'my-component': MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

Dans cet exemple, nous enregistrons MyComponent en tant que composant local du composant actuel. Nous définissons le nom du composant sur "mon-composant" dans la propriété des composants, puis transmettons l'instance du composant comme valeur.

Résumé

Dans cet article, nous avons appris à utiliser des composants dans VUE3 pour charger et enregistrer dynamiquement des composants. Nous y parvenons en utilisant des composants asynchrones et en enregistrant des composants globaux et locaux. Grâce à ces technologies, nous pouvons obtenir de meilleures performances et flexibilité dans VUE3.

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!