Instructions d'utilisation des composants d'enregistrement de vue-js tutoriel-php.cn

Cette fois, je vais vous apporter les instructions étape par étape pour utiliser le composant d'enregistrement vue. Quelles sont les précautions lors de l'utilisation du composant d'enregistrement vue. Voici des cas pratiques, jetons un coup d'œil.

1. Introduction

Le système de composants est l'un des concepts importants de Vue.js. Il fournit une abstraction que nous pouvons utiliser de manière indépendante. et de petits composants réutilisables sont utilisés pour créer des applications à grande échelle. Tout type d'interface d'application peut être résumé dans une arborescence de composants

Alors, que sont les composants ?

Les composants peuvent étendre l'élément HTML et encapsuler du code HTML réutilisable. Nous pouvons considérer les composants comme des éléments HTML personnalisés.

2. Comment enregistrer un composant

L'utilisation du composant de Vue.js comporte 3 étapes : Créer un contrôleur de structure des composants, enregistrer les composants et utiliser les composants.

Le code suivant illustre ces trois étapes

<!DOCTYPE html>
<html>
 <body>
  <p id="app">
   <!-- 注意： #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
   <my-component></my-component>
  </p>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  <!-- 1.创建一个组件构造器 -->
  var myComponent = Vue.extend({
   template: '<p>This is my first component!</p>'
  })
  
  <!-- 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component> -->
  Vue.component('my-component', myComponent)
  
  <!-- 3.通过id=app进行挂载 -->
  new Vue({
   el: '#app'
  });
  
 </script>
</html>

Copier après la connexion

Les résultats d'exécution sont les suivants :

1. Enregistrement global et enregistrement local

Lors de l'appel de Vue.component() pour enregistrer un composant, l'enregistrement du composant est global, ce qui signifie que le composant peut être utilisé dans n'importe quel Exemple de vue.
Si vous n'avez pas besoin d'un enregistrement global, ou si vous souhaitez que le composant soit utilisé dans d'autres composants, vous pouvez utiliser l'attribut composants de l'objet options pour implémenter l'enregistrement local.

Ma propre compréhension est que les composants représentent des composants globaux et les composants représentent des composants locaux

L'exemple ci-dessus peut être modifié en enregistrement local :

<!DOCTYPE html>
<html>
 <body>
  <p id="app">
   <!-- 3. my-component只能在#app下使用-->
   <my-component></my-component>
  </p>
 </body>
 <script src="js/vue.js"></script>
 <script>
  // 1.创建一个组件构造器
  var myComponent = Vue.extend({
   template: '<p>This is my first component!</p>'
  })
  
  new Vue({
   el: '#app',
   components: {
   // 2. 将myComponent组件注册到Vue实例下
    'my-component' : myComponent
   }
  });
 </script>
</html>

Copier après la connexion

Parce que mon Le - Le composant composant est enregistré sous l'instance Vue correspondant à l'élément #app, il ne peut donc pas être utilisé sous d'autres instances Vue.

<p id="app2">
 <!-- 不能使用my-component组件，因为my-component是一个局部组件，它属于#app-->
 <my-component></my-component>
</p>
<script>
 new Vue({
  el: '#app2'
 });
</script>

Copier après la connexion

2. Sucre de syntaxe d'enregistrement des composants

La méthode d'enregistrement des composants ci-dessus est un peu lourde afin de simplifier ce processus. , Vue.js fournit du sucre de syntaxe enregistré

// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
 template: '<p>This is the first component!</p>'
})
var vm1 = new Vue({
 el: '#app1'
})

Copier après la connexion

Le premier paramètre de Vue.component() est le nom de l'étiquette et le deuxième paramètre est un objet d'option. Utilisez l'attribut de modèle de l'objet option pour définir le modèle du composant. En utilisant cette méthode, Vue appellera automatiquement Vue.extend() en coulisses.

les composants implémentent l'enregistrement local

var vm2 = new Vue({
 el: '#app2',
 components: {
  // 局部注册，my-component2是标签名称
  'my-component2': {
   template: '<p>This is the second component!</p>'
  },
  // 局部注册，my-component3是标签名称
  'my-component3': {
   template: '<p>This is the third component!</p>'
  }
 }
}

Copier après la connexion

3. Composants parent et enfant

Nous pouvons définir et utiliser d'autres composants dans le composant, donc Constitue la relation entre les composants parent et enfant.

<!DOCTYPE html>
<html>
 <body>
  <p id="app">
   <parent-component>
   </parent-component>
  </p>
 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  
  var Child = Vue.extend({
   template: '<p>This is a child component!</p>'
  })
  
  var Parent = Vue.extend({
   // 在Parent组件内使用<child-component>标签
   template :'<p>This is a Parent component</p><child-component></child-component>',
   components: {
    // 局部注册Child组件，该组件只能在Parent组件内使用
    'child-component': Child
   }
  })
  
  // 全局注册Parent组件
  Vue.component('parent-component', Parent)
  
  new Vue({
   el: '#app'
  })
  
 </script>
</html>

Copier après la connexion

Le résultat de l'exécution de ce code est le suivant

4. Utilisez des balises de script ou de modèle

Bien que le sucre syntaxique simplifie l'enregistrement des composants, l'épissage des éléments HTML dans l'option de modèle est gênant, ce qui conduit également à un couplage élevé entre HTML et

JavaScript. Heureusement, Vue.js propose deux manières de séparer les modèles HTML définis en JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue组件</title>
 <script src="js/vue.js"></script>
</head>
<body>
 <p id="app1">
  <my-com></my-com>
  <my-com1></my-com1>
 </p>
 <template id="myCom">
  <p>这是template标签构建的组件</p>
 </template>
 <script type="text/x-template" id="myCom1">
  <p>这是script标签构建的组件</p>
 </script>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  Vue.component('my-com1', {
   template: '#myCom1'
  });
  var app1 = new Vue({
   el: '#app1',
   components: {
    'my-com': {
     template: '#myCom'
    }
   }
  });
 </script>
</body>
</html>

Copier après la connexion

Résultats en cours d'exécution :