Table des matières
Pour un contenu complet, veuillez prêter attention à :
Tout d'abord, l'utilisation de base des composants
2. Composants globaux et composants locaux
Enregistrement global, via Vue.component
Enregistrement local, via des composants :{}
Troisièmement, la différence entre les composants parents et les composants enfants
Avant-propos :
Pour un contenu complet, veuillez prêter attention à :
(1 message) Apprentissage de base de Vue
Tout d'abord, l'utilisation de base des composants
Exemple d'utilisation de composant simple
Les composants sont des instances Vue réutilisables avec un nom :
Dans cet exemple, il s'agit du compteur de boutons. Nous pouvons utiliser ce composant comme élément personnalisé dans une instance racine de Vue créée avec le nouveau Vue : <button-counter></button-counter>
templatein est le contenu de l'élément DOM du composant.
<button-counter></button-counter> en utilisant des composants
<div id="app">
<button-counter></button-counter>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('button-counter',{
data:function(){ //必须是函数
return{
count:0
}
},
template:'<button @click="handle">点击了{
{count}}</button>',//只能有一个根元素
methods:{
handle:function(){
this.count++
}
}
})
const vm = new Vue({
el:"#app",
data(){
return{
}
}
})
</script>2. Composants globaux et composants locaux
Enregistrement mondial, via Vue.component
Inscription partielle, par components:{}
composante globale
Composants globaux, qui peuvent être utilisés dans plusieurs instances de vue, similaires aux variables globales.
Utilisez la Vue.component('HelloWorld', {data(){}})méthode pour vous inscrire et utiliser l' <button-counter></button-counter>appel directement. HelloWorldest le nom du composant global et {data(){}}est l'objet de composant défini.
<hello-world></hello-world>
Deuxième composant global via <HelloWorld></HelloWorld>
Implémenté dans le rendu
<div id="app">
<button-counter></button-counter>
<hello-world></hello-world>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('HelloWorld',{
data(){
return{
msg:"HelloWorld"
}
},
template:`<div>{
{msg}}</div>`
})
Vue.component('button-counter',{
data:function(){ //必须是函数
return{
count:0
}
},
template:`
<div>
<button @click="handle">点击了{
{count}}</button>
<HelloWorld></HelloWorld>
</div>`,
//只能有一个根元素
methods:{
handle:function(){
this.count++
}
}
})
const vm = new Vue({
el:"#app",
data(){
return{
}
}
})
</script>composants locaux
Les composants locaux ne peuvent être utilisés que dans les objets montés par l'instance de vue actuelle. Semblables aux variables locales, ils ont une portée au niveau du bloc.
La méthode d'utilisation est la même que la variable globale, utilisez directement l' <hello-world></hello-world>appel
<div id="app">
<hello-world></hello-world>
<hello-tom></hello-tom>
<hello-jerry></hello-jerry>
</div>
<script src="./vue.js"></script>
<script>
let HelloWorld ={
data:function(){
return{
msg:'HelloWorld'
}
},
template:`<div>{
{msg}}</div>`
};
let HelloTom ={
data:function(){
return{
msg:'HelloTom'
}
},
template:`<div>{
{msg}}</div>`
};
let HelloJerry ={
data:function(){
return{
msg:'HelloJerry'
}
},
template:`<div>{
{msg}}</div>`
}
const vm = new Vue({
el:"#app",
data:{
},
components:{
'hello-world': HelloWorld,
'hello-tom': HelloTom,
'hello-jerry': HelloJerry,
}
})
</script>Troisièmement, la différence entre les composants parents et les composants enfants
Le code ci-dessus définit deux objets de composant cpn1et cpn2, cpn2s'enregistre avec des composants locaux dans le composant cpn1et templateutilise le composant enregistré dans le composant, cpn1puis enregistre le composant local cpn2dans l'instance de vue et l'appelle dans le div monté par l'instance de vue. cpn2, cpn2et cpn1forment une relation de composant parent-enfant.
Remarque : Un composant est une instance de vue, et les attributs de l'instance de vue peuvent également avoir des composants, tels que des données, des méthodes, des calculs, etc.
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpn1 = Vue.extend({
template:`
<div>
<h2>标题1</h2>
<p>组件1</p>
</div>`
})
// 组件2中使用组件1
const cpn2 = Vue.extend({
template:`
<div>
<h2>标题2</h2>
<p>组件2</p>
<cpn1></cpn1>
</div>`,
components:{
cpn1:cpn1
}
})
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpn2:cpn2
}
})
</script>