組件（Component）
組件是VUE最強大的功能之一罕伯。組件可以擴展HTML元素乾吻，封裝可重用的代碼。在較高層面上织阅，組件是自定義元素壳繁，Vue.js的編譯器為它添加特殊功能。
組件化開發(fā)就是把一個完整的頁面分割成一個一個的小組件荔棉。
組件化開發(fā)可以使代碼更容易維護闹炉，得到更好的復(fù)用效果。
Vue組件分為全局組件和局部組件：
全局組件：在所有的vue實例中都可以使用
局部組件：只有在當前的vue實例中可以使用
全局組件
Vue.component(tagName, options)
//注冊一個全局組件
Vue.component("hello", {
//注意模板中只能有一個根元素
//template:'<h1></h1><h1></h1>'; 這是不可以的
template:'<h1>hello component</h1>';
})
全局組件可以在所有實例中使用
<div id="app">
<hello></hello>
</div>
局部組件
局部組件卸載vue實例的內(nèi)部润樱，通過components屬性來定義局部組件
components:{
"hello":{
template:`<h1>hello</h1>`
}
}
組件是特殊的vue實例
可以把組件看成一個vue的實例渣触，因此，在vue實例中能配置的屬性（data, method, watch等）在組件中依舊能夠配置壹若。
組件中的data屬性必須是一個函數(shù)嗅钻，返回值才是data的數(shù)據(jù)
Vue.component("my-cp",{
template:`
<div>
<button @click="fn">{{msg}}</button>
</div>
`,
data(){
return {
msg: 'click me'
}
},
methods:{
fn(){console.log('------->fn')}
}
})
組件是一個獨立封閉的個體皂冰，組件之間的數(shù)據(jù)相互獨立，不能互相使用
組件間通訊
如上所述养篓，組件是一個單獨的個體秃流，各自的數(shù)據(jù)無法互相使用，但在工作中柳弄，多個組件之間的數(shù)據(jù)是需要互通的舶胀。
組件之間的通訊按照結(jié)構(gòu)分為：
1.父傳子
2.子傳父
3.非父子
組件通訊-父傳子
1.定義father
Vue.component("father", {
template:`
<div class="father">
<son></son>
</div>
`,
data():{
return {
name: 'clark',
power:'super'
}
}
})
2.定義son
Vue.component("son", {
template:`
<div class="son">superman</div>
`
})
3.通訊
父組件模板中：
template:`
<div>
//培養(yǎng)超能力
//:power是注冊的屬性
//"power"是父組件中的數(shù)據(jù)
//把數(shù)據(jù)在這里傳給子組件
<son :power="power"></son>
</div>
`
子組件模板中：
template: `
<div>
<p>從father繼承了{{power}}</p>
</div>
`,
//子組件使用props屬性接受父組件傳來的數(shù)據(jù)，然后在template中使用
props:['power']
組件通訊-子傳父
思路方面语御，邏輯是在父類的方法中實現(xiàn)，只是實現(xiàn)邏輯的參數(shù)是由子組件傳遞過來的席怪。
let vm = new Vue({
el:"#dog",
methods:{
//父組件中定義了處理事件的方法应闯，id是子組件傳來的參數(shù)
delinlist(id){
...
}
}
})
接下來考慮的是子組件如何傳遞參數(shù)了
Vue.component('btable', {
template:`
...
//在子組件的模板中綁定click事件，指向組件自己的del(id)方法
<a @click="del(item.id)"></a>
...
`,
method:{
del(id){
//使用$emit發(fā)出當前實例的事件
this.$emit('del-event', id)
}
}
})
在使用中如下
//這里注意挂捻，@del-event綁定的是子組件發(fā)出的事件碉纺，"delinlist"是父組件中處理數(shù)據(jù)的方法
<btable @del-event="delinlist"></btable>
組件通訊-非父子
思路：使用一個空的實例md，接受數(shù)據(jù)的A模板設(shè)置方法到md上刻撒，再由發(fā)送數(shù)據(jù)的B模板去觸發(fā)
空模板：
const md = new Vue()
A模板(在md上掛載getmsg方法)
Vue.component('batman', {
template: `<div>蝙蝠俠收到消息:{{msg}}</div>`,
created() {
md.$on('getmsg', msg => {
this.msg = msg
})
},
data() {
return {
msg: this.msg
}
}
})
B模板(點擊按鈕后觸發(fā)md上已經(jīng)掛載的getmsg方法)
Vue.component('flash', {
template: `<button @click="run">閃電俠說話</button>`,
data() {
return {
msg: 'find us'
}
},
methods: {
run() {
md.$emit('getmsg', this.msg)
}
}
})
Vue
var vm = new Vue({
el: "#dog",
})
使用
<div id="dog">
<batman></batman>
<flash></flash>
</div>
