Conseils et bonnes pratiques pour utiliser des composants à fichier unique pour implémenter la modularisation des composants dans Vue

Vue est un framework JavaScript populaire largement utilisé pour développer des applications monopage et des sites Web dynamiques. Parmi eux, la composantisation et la modularisation sont l'une de ses principales caractéristiques. Vue implémente la modularisation des composants via des composants à fichier unique (SFC) pour améliorer l'efficacité de l'écriture, de la maintenance et des tests des composants.

Cet article présentera des conseils et des bonnes pratiques pour utiliser des composants à fichier unique pour implémenter la modularisation des composants Vue.

Qu'est-ce qu'un composant de fichier unique ?

Un composant de fichier unique fait référence à un fichier avec le suffixe .vue, qui contient un composant Vue complet. Un fichier SFC contient généralement trois parties : le code du modèle, le code du script et le code du style. Voici un exemple de composant simple :

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

<style scoped>
h1 {
  font-size: 20px;
  color: red;
}
p {
  font-size: 16px;
  color: blue;
}
</style>

Dans l'exemple ci-dessus, la balise template contient le code du modèle, la balise script définit la définition du composant, y compris le nom du composant et les attributs props, et la balise style définit le code de style. Parmi eux, le mot-clé scoped signifie que ce code de style n'agit qu'à l'intérieur du composant actuel.

L'utilisation de composants à fichier unique peut encapsuler un composant complet dans un seul fichier, ce qui facilite l'écriture et la maintenance des composants. Lorsqu'un composant est utilisé, il vous suffit d'importer le composant correspondant.

Comment utiliser les composants d'un seul fichier ?

L'utilisation de composants à fichier unique dans les projets Vue nécessite une compilation via un outil de construction (tel que Webpack). Le code compilé peut être exécuté directement dans le navigateur. Avant d'utiliser des composants à fichier unique, vous devez installer l'échafaudage Vue.

1. Installer Vue scaffolding

npm install -g vue-cli

2. Créer un nouveau projet Vue

vue init webpack my-project

3. Entrez le répertoire du projet et installez les dépendances

cd my-project
npm install

4. Créez un nouveau composant de fichier unique

Créez-le dans le src/composants répertoire Un nouveau fichier .vue, par exemple :

<template>
  <div class="hello">
    <h1>{{ greeting }}</h1>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    greeting: {
      type: String,
      default: 'Hello'
    },
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 32px;
  color: red;
}
ul li {
  font-size: 16px;
  color: blue;
}
</style>

5. Référencez ce composant dans d'autres composants

Lorsque vous utilisez ce composant dans d'autres composants, vous devez d'abord importer ce composant :

import HelloWorld from '@/components/HelloWorld.vue'

Utilisez ensuite ce composant dans le composant :

<template>
  <div>
    <HelloWorld :greeting="greeting" :items="list" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'AnotherComponent',
  components: {
    HelloWorld
  },
  data() {
    return {
      greeting: 'Bonjour',
      list: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

<style scoped>
/* 样式代码 */
</style>

En général, il est très simple d'utiliser des composants à fichier unique pour modulariser les composants. Il vous suffit de définir les composants comme ci-dessus, puis de les importer là où vous devez les utiliser. Bien entendu, il existe d’autres utilisations et techniques, qui seront présentées plus loin.

Bonnes pratiques pour les composants à fichier unique

Règles de dénomination pour les noms de composants

Les noms de composants doivent commencer par une lettre majuscule et être nommés en casse chameau, comme MyComponent. Cette méthode de dénomination est plus conforme aux spécifications officielles de Vue et est plus facile à distinguer des balises HTML.

Écriture du code du modèle

Lors de l'écriture du code du modèle, vous devez suivre les règles suivantes :

• Le code du modèle ne doit contenir que du code lié au rendu des données et éviter d'écrire une logique métier complexe dans le code du modèle ;
• Si le modèle le code est trop complexe, vous pouvez envisager de séparer le code en composants distincts pour améliorer la réutilisabilité du code ;
• Dans le code du modèle, vous devez suivre la syntaxe de liaison de données de Vue, telle que {{ message }}, v-for et v -if et autres instructions ;
• Essayez d'éviter d'utiliser des expressions JavaScript ou des appels de fonction dans le code du modèle et déplacez-les vers la balise de script du composant.

Écriture de code de script

Lors de l'écriture de balises de script, vous devez suivre les règles suivantes :

• Lors de la définition d'un composant dans une balise de script, vous devez clarifier l'attribut props du composant pour éviter les erreurs de type ou les problèmes potentiels ;
À l'intérieur du composant, vous devez suivre les fonctions de hook du cycle de vie de Vue, telles que les fonctions créées, montées et autres. Par défaut, cette de ces fonctions pointe vers l'instance du composant actuel.
• À l'intérieur du composant, vous devez éviter d'utiliser la flèche ; fonctions ou fonctions dans les attributs Appelez, car cela modifiera le pointeur this à l'intérieur de la fonction ;
• Dans le composant, vous devez éviter de modifier directement l'attribut props. Vous pouvez obtenir une liaison de données bidirectionnelle via le modificateur .sync ou $emit. méthode ;
• Au sein du composant, vous devez éviter de modifier directement l'état de Vuex par le biais de mutations et d'actions.

Écriture du code de style

Lors de l'écriture du code de style, vous devez suivre les points suivants :

Lors de la définition du style dans la balise style, vous devez utiliser le mot-clé scoped pour vous assurer que le style n'agit qu'à l'intérieur du composant actuel.
• Lors de l'écriture de styles, vous devez faire attention à l'utilisation de noms de classes CSS et de sélecteurs imbriqués appropriés pour éviter les conflits de style.
• Lors de l'écriture de styles, vous devez utiliser autant que possible des outils tels que des variables et des mixins pour améliorer la réutilisabilité du style ; code ;
• Lors de l'écriture de styles, vous devez suivre les directives et normes de conception correspondantes pour garantir la cohérence du style.

Réutilisation et extension des composants

Pour certains composants fréquemment utilisés, ils doivent être encapsulés autant que possible dans des composants de base pour améliorer la réutilisabilité du code. Par exemple, vous pouvez encapsuler un composant bouton dans un composant de base, puis le réutiliser et l'étendre dans d'autres composants. Si vous devez étendre ou modifier un composant, vous pouvez utiliser le mécanisme de mixage ou d'héritage de Vue pour y parvenir.

Résumé

Le composant de fichier unique est une fonctionnalité très importante dans Vue En utilisant un composant de fichier unique, un composant complet peut être encapsulé dans un seul fichier, ce qui facilite l'écriture et la maintenance des composants. Lorsque vous utilisez des composants à fichier unique, vous devez suivre les spécifications et les meilleures pratiques correspondantes, telles que la dénomination des composants, l'écriture de code de modèle, l'écriture de code de script, l'écriture de code de style, la réutilisation et l'extension des composants, etc., pour améliorer l'efficacité du composant. et de qualité.

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!