Introduction à la fonction Vue.component et comment enregistrer des composants globaux

Vue fournit la méthode globale Vue.component pour enregistrer les composants. Cette méthode accepte le nom du composant enregistré et l'objet de configuration du composant comme paramètres. Nous enregistrons généralement les composants avant la création de l'instance Vue. Voici un exemple :

Vue.component('my-component', {
  template: '<div>这是一个自定义组件</div>'
})

new Vue({
  el: '#app'
})

Dans l'exemple ci-dessus, nous avons enregistré le composant 'my-component' via la méthode globale Vue.component. Ensuite, nous créons une instance Vue et la montons sur l'élément DOM avec l'identifiant « app ».

Nous pouvons désormais utiliser le composant 'my-component' dans l'instance Vue. Pour utiliser un composant dans un modèle Vue, utilisez simplement le nom du composant comme balise. Voici un exemple :

<div id="app">
  <my-component></my-component>
</div>

Dans l'exemple ci-dessus, nous avons utilisé le composant 'my-component' dans le modèle de l'instance Vue. Exécutez cette instance Vue et nous verrons le texte « Ceci est un composant personnalisé » sur la page.

Pour résumer, la fonction Vue.component est la méthode utilisée pour enregistrer les composants globaux. En passant le nom du composant et l'objet de configuration à cette fonction, nous pouvons utiliser le composant dans n'importe quelle instance de Vue. Après avoir enregistré le composant, nous pouvons utiliser le nom du composant comme étiquette dans le modèle de l'instance Vue. Il s'agit d'une manière concise, flexible et réutilisable de gérer et d'utiliser les composants.

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!