Maison > Article > interface Web > Comment créer des composants dans Vue
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('my-component1',{ template: '<p>This is the first component!</p>' }) var vm1 = new Vue({ el: '#app1' })
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: '#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>' } } })
== 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='box'> <parent> </parent> </p> <script src='js/vue.js'></script> <script> Vue.component('parent',{ template:`<p><h1>我是父组件</h1><child></child></p>`, components:{ 'child':{ template:`<h1>我是子组件</h1>` } } }) new Vue({ el:'#box' }) </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='box'> <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 ?
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!