基于職責(zé)單一原則忱辅，在做應(yīng)用開發(fā)時(shí)要盡量傾向于功能最小粒度的組件封裝
不可避免的，我們的大應(yīng)用就會(huì)被切割成很多小組件扮念， 這也是利于后續(xù)維護(hù)和開發(fā)。
而應(yīng)用總是一體的巧勤，組件之間也是聯(lián)系不斷弄匕，組件之間的通信就必不可少，在Vue中有如下幾種組件通信方式
屬性/事件
用于父子組件之間通信驹溃，是最常用的組件通信方式：
- 子組件可以在props定義屬性擴(kuò)展延曙，供父組件傳入用以接收父組件信息搂鲫，在子組件中可通過watch來監(jiān)聽變化
- 父組件在子組件上做事件捕獲，通過子組件的事件觸發(fā)接收子組件信息
<list>
<list-item @del='actDel(index)' :item="item" v-for="(item,index) in list"></list-item>
</list>
list組件
{
data(){
return {
list:[
{name:"test1"}, {name:"test2"}, {name:"test3"}
]
}
},
methods:{
actDel(index){
this.list.splice(index,1)
}
}
}
list-item 組件
{
template: `<div><span v-html="item.name"></span><button @click="$emit('del')">刪除</button></div>`,
props:["item"]
}
狀態(tài)機(jī)
通過vuex狀態(tài)機(jī)來管理應(yīng)用統(tǒng)一狀態(tài)，狀態(tài)數(shù)據(jù)可以在應(yīng)用的各組件中訪問擦酌，并監(jiān)聽變化
store.js
{
state:{
userName:"test"
},
mutations:{
changeUName(state,name){
this.userName=name;
}
}
}
{
template: `<div v-html="$store.state.userName"></div>`
}
新建Vue實(shí)例
新建多一個(gè)Vue實(shí)例來做統(tǒng)一事件訂閱發(fā)布
event.js
var Event=new Vue();
export default Event;
a.js
<template>
<div></div>
</template>
<script>
import Event from "event";
export default{
mounted(){
Event.$on("test",function(){console.log('test')})
}
}
</script>
b.js
<template>
<div><button @click="emitTest">Test</button></div>
</template>
<script>
import Event from "event";
export default{
methods:{
emitTest(){
Event.$emit("test")
}
}
}
</script>
