Propriété components de Vue 3
Vue3 API des optionsDans Vue3,componentsla propriété est utilisée pour enregistrer des composants locaux. Viacomponentsles composants enregistrés avec la propriété ne peuvent être utilisés que dans le composant actuel et n'affectent pas les autres composants. Cela nous permet de réutiliser le même nom de composant dans différents composants sans conflit de nommage.
Comment utiliser la propriété Components ?
Utilisationcomponentsla propriété est très simple. Il vous suffit, dans la section du composant Vuescript, de définir uncomponentsobjet, puis d'ajouter le composant que vous souhaitez enregistrer comme propriété de cet objet.
1. Exemple de code
Exemple
<template>
<div>
<MyComponent />
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>
<div>
<MyComponent />
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>
2. Explication du code
<MyComponent />: C'est la balise du composant local que nous avons enregistré et utilisons dans le template.import MyComponent from './MyComponent.vue';: Nous devons d'abord importer le composant à enregistrer.components: { MyComponent }: Dans l'componentsobjet, nousMyComponentenregistrons le composant comme composant local.
Pourquoi utiliser la propriété Components ?
Utilisationcomponentsla propriété pour enregistrer les composants locaux présente les avantages suivants :
- Modularité: Décomposez les composants en parties plus petites, ce qui rend le code plus facile à maintenir et à comprendre.
- Réutilisabilité: Vous pouvez réutiliser les mêmes composants dans différents composants sans les redéfinir.
- Espace de noms: La portée d'enregistrement des composants locaux est limitée au composant actuel, ce qui évite les conflits de nommage globaux.
Notes
- Portée des composants locaux: Les composants enregistrés via
componentsla propriété ne peut être utilisée que dans le composant actuel. Si vous devez utiliser le même composant dans d'autres composants, vous devez l'enregistrer à nouveau dans ces composants. - Nommage des composants: Les noms de composants utilisent généralement le PascalCase, mais lorsqu'ils sont utilisés dans les templates, le kebab-case peut être utilisé. Par exemple,
MyComponentpeut être écrit dans le template comme<my-component />。
Autres extensions