Qu'est-ce que le composant vue

Dans Vue, un composant est une instance Vue réutilisable. Il a un nom de composant unique. Il peut étendre les éléments HTML et utiliser le nom du composant comme balise HTML personnalisée. Les composants peuvent grandement améliorer la réutilisation du code.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Que sont les composants ?

Le composant est un concept important dans Vue. Il s'agit d'une instance de Vue réutilisable. Elle a un nom de composant unique. Elle peut étendre les éléments HTML et utiliser le nom du composant comme balise HTML personnalisée. Étant donné que les composants sont des instances Vue réutilisables, ils reçoivent les mêmes options que new Vue(), telles que les données, les calculs, la surveillance, les méthodes et les hooks de cycle de vie. Les seules exceptions sont les options spécifiques à l'instance racine comme el.

Extrayez certains modules courants et écrivez-les dans des composants ou des pages d'outils séparés, puis importez-les directement dans les pages requises. Ensuite, nous pouvons l'extraire en tant que composant pour le réutiliser.

Par exemple, l'en-tête de la page, le côté, la zone de contenu, la queue, les images téléchargées, etc. peuvent être transformés en composants si plusieurs pages utilisent les mêmes, ce qui améliore le taux de réutilisation du code.

Utilisation des composants Vue

Parlons d'abord de notre répertoire

1. Créer notre composant B.vue

Similaire ly, Nouveau Un hello_word .vue en tant que parent

Ensuite, vous verrez un résultat comme celui-ci

Points clés :

Introduisez le module B.vue dans hello_word.vue // import showB from './B .vue' Introduire le composant

Le nom du module personnalisé du fichier B showB

Enregistrer le composant

 components:{
          showB,        
        },
<showB /> //使用组件

Remarque : Définissez le nom du composant en casse chameau, tel que ：Utilisez PascalCase Utilisez kebab-case

Commencez à accéder aux accessoires du sujet principal

Le composant parent transmet la valeur au composant enfant (Le composant parent lie des données telles que : value="Il est temps to work", le composant enfant passe props Get)
L'option props du composant enfant peut recevoir des données du composant parent. C'est vrai, ils ne peuvent être reçus que dans un sens, c'est-à-dire qu'ils ne peuvent être transmis que du composant parent au composant enfant, et non l'inverse.
L'utilisation est la suivante :

Composant B

Composant parent

Ensuite, vous verrez la page s'afficher

imprimer la valeur de la valeur dans le résultat créé

,

Le composant enfant transmet la valeur au composant parent

Dans le composant enfant :

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit(&#39;msg&#39;, &#39;知道了知道了&#39;) //执行 msg 函数并把要改变的值作为参数带过去
        }

Composant parent :

Introduisez @msg='msg' dans le DOM

<showB :value=&#39;text&#39; @msg=&#39;msg&#39;/> 
 msg(val){
                 console.log(val,&#39;val&#39;)
                 }

Recevez-le via le méthode

Exécuter, cliquez pour répondre au composant parent

Résultat d'impression :

Pour plus de connaissances liées à la programmation, veuillez visiter : Apprendre la programmation ! !

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!