Comment créer des composants dans Vue-js tutoriel-php.cn

Comment créer des composants dans Vue

亚连

Libérer： 2018-06-05 09:45:41

original

2419 Les gens l'ont consulté

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({})

Copier après la connexion

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;
})

Copier après la connexion

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;
  }
 }
})

Copier après la connexion

== 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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!