Maison > Article > interface Web > 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.
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.
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.
npm install -g vue-cli
vue init webpack my-project
cd my-project npm install
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>
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.
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.
Lors de l'écriture du code du modèle, vous devez suivre les règles suivantes :
Lors de l'écriture de balises de script, vous devez suivre les règles suivantes :
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!