組件:
類似于 模塊化 概念
一、組件定義
1)局部組件
只能在自己的Vue對象范圍內(nèi)使用躬存。
new Vue({
el:
data:
...
components:{
'組件名':{
template:'html標簽' —— 組件使用的模板
},
'組件名2':{
template:'html標簽' —— 組件使用的模板
}
}
})
*注意事件:? 組件名不能有大寫字母 —— vue 2.2.4
2)全局組件
在哪里(Vue認識的范圍)都可以使用的組件。
Vue.component('組件名',{
//選項
template:'html標簽'
});
二羽嫡、組件的內(nèi)部信息(選項)——細化選項:
1谨湘、template —— 渲染組件的模板
2、數(shù)據(jù) —— 函數(shù)形式碱屁,函數(shù)有返回值,返回json蛾找,json里面就是這個組件的數(shù)據(jù)data(){return {msg:'',a:12,arr:[].....}}
3娩脾、方法 methods:{show(){},show2(){}}三、模板提取
1)template 標簽
2)script 標簽 —— 官方推薦
...
組件間的通信:
1打毛、父子間——子組件使用父組件的數(shù)據(jù)
2柿赊、父子間——父組件使用子組件的數(shù)據(jù)
3、組件間——A組件和B組件之間的數(shù)據(jù)交換
一幻枉、子組件使用父組件的數(shù)據(jù)
1膜钓、在父組件里允睹,通過自定義屬性的方式晚树,把數(shù)據(jù)傳到子組件<子組件 :屬性名='父級數(shù)據(jù)'>2在抛、在子組件里接收1)Vue.compoent('',{props:['屬性名']});
2)Vue.componet('',{props:{'屬性名':String / Number}//*? 如果參數(shù)是數(shù)字钙勃,但是指定的是String,這時會有警告漩怎,但不影響程序結(jié)果})
3糊秆、在子組件里使用:
{{屬性名}}
父組件使用子組件的數(shù)據(jù)
1鹏往、子級主動發(fā)送數(shù)據(jù)
this.$emit('事件名',要發(fā)送的數(shù)據(jù));? ——? 可以理解為子級新建了一個事件并且把它公布出去了脚粟,父級就可以使用這個事件了
this.$emit('child-say',msg);
2覆旱、父級通過事件的方式來取數(shù)據(jù)
@事件名=“父級方法名”
@child-say="receive"
-------
receive(d){
alert(d);? //這里的d就是子級的數(shù)據(jù)
組件通信:1、子取父核无,父取子子取父:父:{
//res ->? a的數(shù)據(jù)
});
這種方式的缺點: 不同的組件扣唱,發(fā)出的事件名不能重。
3团南、單一集中數(shù)據(jù)管理
定義一個公用的對象噪沙,大家用的數(shù)據(jù)都在這個對象里,任何組件可以直接使用吐根,可以更改——利用了 引用 的特性正歼。
const DATA = {
msg:'明天接著唱',
name:'蔡哲浩',
count:2
};
1.定義組件
全局
局部
2.組件通信
1)父子間
父->子:自定義屬性,props
子->父:this.$emit('say',msg) , @say="show"
2)單一事件管理
let ev = new Vue();
發(fā):ev.$emit('say',msg);
收:ev.$on('say',r=>{
r
});
3)單一集中數(shù)據(jù)管理
const DATA = {
msg1:..
msg2:..
}