Comment référencer des composants encapsulés dans vue

Avec le développement continu des frameworks front-end, de plus en plus de développeurs commencent à utiliser Vue.js pour créer des applications Web. Dans Vue.js, les composants sont l'un des concepts fondamentaux pour la création d'applications Web. Les composants Vue.js rendent le code plus modulaire, réutilisable, plus facile à maintenir et à tester. L'encapsulation de composants est l'une des fonctionnalités importantes de Vue.js. Il peut encapsuler du code et un état réutilisables dans un module séparé, appelé composant, afin qu'il puisse être réutilisé dans différentes parties du programme. Cet article explique comment référencer des composants encapsulés.

1. Créer le composant

Tout d'abord, nous devons créer le composant Vue. Avant de créer un composant, nous devons déterminer le nom du composant, ses propriétés, ses méthodes, etc. Dans cet article, nous prenons un simple composant de bouton comme exemple pour montrer comment référencer des composants encapsulés. Ce composant bouton a deux propriétés : btnClass et btnText est utilisé pour spécifier le nom de classe du bouton, et btnText est utilisé pour spécifier le contenu textuel du bouton. Voici l'exemple de code pour le composant bouton :

<template>
  <button :class="btnClass">{{ btnText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    btnClass: {
      type: String,
      default: '',
    },
    btnText: {
      type: String,
      default: '',
    },
  },
};
</script>

2. Enregistrez le composant en tant que composant global

Pour utiliser le composant n'importe où dans l'application, nous devons enregistrer le composant en tant que composant global. De cette façon, le composant peut être référencé n'importe où. Dans les fichiers qui doivent utiliser des composants, utilisez simplement le nom du composant dans le modèle. Pour enregistrer un composant en tant que composant global, utilisez simplement la méthode Vue.component(). Voici l'exemple de code :

import Vue from 'vue';
import MyButton from './components/MyButton.vue';

Vue.component('MyButton', MyButton);

Lors de l'enregistrement d'un composant, nous devons déclarer le nom du composant et le chemin d'accès au fichier du composant.

3. Enregistrer un composant en tant que composant local

Contrairement aux composants globaux, les composants locaux ne peuvent être utilisés que dans l'emplacement enregistré et ses sous-composants. Cette approche convient lorsque vous devez utiliser le même composant dans plusieurs composants enfants avec le même composant parent. Dans l'exemple de code suivant, nous enregistrons le composant en tant que composant local :

<template>
  <div>
    <MyButton btnClass="primary" btnText="Click me"></MyButton>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  name: 'MyView',
  components: { MyButton },
};
</script>

Lors de l'enregistrement d'un composant local, vous devez déclarer le composant dans l'option composants du composant où le composant est enregistré.

4. Présentation des composants externes

Nous plaçons les fichiers de composants dans le répertoire des composants, puis introduisons le composant dans le fichier qui doit utiliser le composant (tel que App.vue). Lorsque nous devons utiliser ce composant, nous l'utilisons simplement dans le modèle. Comme indiqué ci-dessous :

import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton,
  },
};

Bien sûr, il existe d'autres façons de référencer des composants, comme le chargement dynamique de composants à l'aide de la fonction import(), ou l'ajout de composants à l'aide de la méthode Vue.component(), etc. Choisissez la méthode la plus appropriée en fonction de la situation réelle.

Résumé

Vue.js est un framework frontal puissant, et son système de composants est l'un des concepts de base pour la création d'applications Web. Les composants encapsulés de Vue.js peuvent rendre le code plus modulaire, réutilisable, plus facile à maintenir et à tester. Pour référencer un composant dans une application, nous devons enregistrer un nom pour le composant puis l'introduire dans le fichier où le composant doit être utilisé. Rendre notre code plus modulaire et réutilisable, réduisant ainsi la redondance du code. J'espère que cet article vous a été utile et vous a permis de mieux utiliser les composants Vue.js.

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!