Maison >interface Web >js tutoriel >Comment créer des composants dans Vue

Comment créer des composants dans Vue

亚连original: 2018-06-05 09:45:412426parcourir

Quelles sont les méthodes de création de composants dans Vue ? Ci-dessous, je partagerai avec vous un résumé de deux méthodes de création de composants dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Résumé de deux méthodes de création de composants

1.Inscription globale

2. Inscription locale

var child=Vue.extend({})
var parent=Vue.extend({})

La méthode globale Vue.extend() génère un constructeur et crée une sous-classe

Utilisez le constructeur de base Vue pour créer une "sous-classe".

Écrire ainsi est très fastidieux. Vue a donc été simplifiée

Utilisez Vue.component() pour créer et enregistrer directement des composants :

La méthode globale Vue.component(id, options) est utilisée pour enregistrer des composants globaux

id est un type de chaîne, qui est le nom du composant enregistré

options est un objet

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

Vue.component Le premier paramètre de () est le nom de l'étiquette et le deuxième paramètre est un objet d'options. Utilisez l'attribut modèle de l'objet option pour définir le modèle de composant.

En utilisant cette méthode, Vue appellera automatiquement Vue.extend() en coulisses.

Implémenter l'enregistrement partiel dans l'attribut composants de l'objet options :

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

== L'enregistrement local est placé Create ==

dans l'objet options. Remarque : Voici des composants dans lesquels plusieurs composants peuvent être définis.

L'écriture simplifiée est comme ça

<body>
 <p id=&#39;box&#39;>  
  <parent>  
  </parent>
 </p>
 <script src=&#39;js/vue.js&#39;></script>
 <script>
  Vue.component(&#39;parent&#39;,{
   template:`<p><h1>我是父组件</h1><child></child></p>`,
    components:{
    &#39;child&#39;:{
     template:`<h1>我是子组件</h1>`
    }
   }
  })
  new Vue({
   el:&#39;#box&#39;
  })
 </script>
</body>

Enregistrez-en un Le composant parent du parent. Enregistrez ensuite un sous-composant enfant dans l'objet options du composant parent. Écrivez la balise du composant enfant dans le modèle du composant parent.

La structure de style sur la page est

<p>
 <h1>我是父组件</h1>
 <h1>我是子组件</h1>
</p>

Remarque : Utiliser des sous-composants enregistrés localement Impossible être utilisé directement seul !

Si le tag est accroché en p, une erreur sera signalée

<p id=&#39;box&#39;>  
 <child></child>
</p>

Le ci-dessus est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment définir votre propre composant de sélection basé sur ng-alain en angulaire ?

Comment implémenter les modifications dans les objets de surveillance de la montre et les valeurs correspondantes dans vue

Comment résoudre le problème que Vue ne peut pas détecter les tableaux ou des problèmes avec les modifications d'objets ?

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser js pour trouver la chaîne palindrome la plus longue dans une chaîneArticle suivant：Comment utiliser js pour trouver la chaîne palindrome la plus longue dans une chaîne

Articles Liés

Voir plus