組件是vue最主要的語法特性之一剔桨，組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上毯侦，組件是自定義元素哭靖， Vue.js 的編譯器為它添加特殊功能。在 Vue 里侈离，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例试幽。
只有把各組件的通訊運(yùn)用的游刃有余，才能說自己已經(jīng)入門了卦碾，不是嗎铺坞？
方法調(diào)用
1、子組件調(diào)用父組件的方法
- 直接用this.$parent.xxxx這樣直接調(diào)用父組件的方法洲胖。
- 用$emit向父組件觸發(fā)一個(gè)事件济榨，父組件監(jiān)聽這個(gè)事件就行了。
//父組件
<child @refreshList="onRefresList"></child>
onRefresList(data){
console.log(data);
}
//子組件
this.$emit('refreshList',data);
2绿映、父組件調(diào)用子組件的方法
- 用this.$children擒滑，但得到是一個(gè)數(shù)組，包含所有的子組件叉弦，可通過屬性判斷
- 通過ref調(diào)用
//父組件
<coma :das="da" ref="comA"></coma> //子
this.$refs.comA.say("data"); //調(diào)用子的事件丐一，并傳值過去
this.$refs.comA.val++; //改變子的值
//子組件
say(data){
console.log(data);
alert("父調(diào)用我的");
}
3、兄弟組件調(diào)用方法
//mian.js
window.EventBus = new Vue();
//兄弟1（調(diào)用者）
EventBus.$emit("setVal", data);
//兄弟2（被調(diào)用者）
//mounted()鉤子中監(jiān)聽
bus.$on('setVal', (data) => {
console.log(data);
}
數(shù)據(jù)傳遞
1淹冰、父組件傳子組件
//父組件
<child :inputName="name"></child> //name是父組件的data里的值
<child inputName="name"></child> //name是一個(gè)字符串
//子組件
props: ["inputName","head"]
傳過來的值不能在data里出現(xiàn)库车，不能修改，拿到后應(yīng)用變量存著榄棵，其他來操作變量
//子組件傳過來驗(yàn)證凝颇、有默認(rèn)值
props: {
'head': Object,
'pagecount': {
default: 5,
type: Number //String Number Boolean Function Object Array Symbol
}
}
