寫在前面
因爲對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，並做了總結與輸出。
文章的原地址：https://github.com/answershuto/learnVue。
在學習過程中，爲Vue加上了中文的註釋https://github.com/answershuto/learnVue/tree/master/vue-src，希望可以對其他想學習Vue源碼的小夥伴有所幫助。
可能會有理解存在偏差的地方，歡迎提issue指出，共同學習，共同進步。
什麼是Vue組件？
<br /> <br />
Vue組件間通信
父組件向子組件通信
方法一：props
使用props，父組件可以使用props向子組件傳遞數據。
父組件vue模板father.vue
<template>
<child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data () {
return {
message: 'father message';
}
}
}
</script>
子組件vue模板child.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
}
}
</script>
<br />
方法二 使用$children
使用$children可以在父組件中訪問子組件。
<br /> <br />
子組件向父組件通信
<br />
方法一:使用vue事件
父組件向子組件傳遞事件方法，子組件通過$emit觸發事件，回調給父組件。
父組件vue模板father.vue
<template>
<child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
methods: {
func (msg) {
console.log(msg);
}
}
}
</script>
子組件vue模板child.vue
<template>
<button @click="handleClick">點我</button>
</template>
<script>
export default {
props: {
msg: {
type: String,
required: true
}
},
methods () {
handleClick () {
//........
this.$emit('msgFunc');
}
}
}
</script>
<br />
方法二： 通過修改父組件傳遞的props來修改父組件數據
這種方法只能在父組件傳遞一個引用變量時可以使用，字面變量無法達到相應效果。因爲飲用變量最終無論是父組件中的數據還是子組件得到的props中的數據都是指向同一塊內存地址，所以修改了子組件中props的數據即修改了父組件的數據。
但是並不推薦這麼做，並不建議直接修改props的值，如果數據是用於顯示修改的，在實際開發中我經常會將其放入data中，在需要回傳給父組件的時候再用事件回傳數據。這樣做保持了組件獨立以及解耦，不會因爲使用同一份數據而導致數據流異常混亂，只通過特定的接口傳遞數據來達到修改數據的目的，而內部數據狀態由專門的data負責管理。
<br />
方法三：使用$parent
使用$parent可以訪問父組件的數據。
<br /> <br />
非父子組件、兄弟組件之間的數據傳遞
非父子組件通信，Vue官方推薦使用一個Vue實例作爲中央事件總線。
Vue內部有一個事件機制，可以參考源碼。
$on方法用來監聽一個事件。
$emit用來觸發一個事件。
/*新建一個Vue實例作爲中央事件總嫌*/
let event = new Vue();
/*監聽事件*/
event.$on('eventName', (val) => {
//......do something
});
/*觸發事件*/
event.$emit('eventName', 'this is a message.');
<br /> <br />
多層級父子組件通信：
在Vue1.0中實現了$broadcast與$dispatch兩個方法用來向子組件（或父組件）廣播（或派發），當子組件（或父組件）上監聽了事件並返回true的時候會向爺孫級組件繼續廣播（或派發）事件。但是這個方法在Vue2.0裏面已經被移除了。
之前在學習餓了麼的開源組件庫element的時候發現他們重新實現了broadcast以及dispatch的方法，以mixin的方式引入，具體可以參考《說說element組件庫broadcast與dispatch》。但是跟Vue1.0的兩個方法實現有略微的不同。這兩個方法實現了向子孫組件事件廣播以及向多層級父組件事件派發的功能。但是並非廣義上的事件廣播，它需要指定一個commentName進行向指定組件名組件定向廣播（派發）事件。
其實這兩個方法內部實現還是用到的還是$parent以及$children，用以遍歷子節點或是逐級向上查詢父節點，訪問到指定組件名的時候，調用$emit觸發指定事件。
<br /> <br />
複雜的單頁應用數據管理
當應用足夠複雜情況下，請使用vuex進行數據管理。
關於
作者：染陌
Email：[email protected] or [email protected]
Github: https://github.com/answershuto
Blog：http://answershuto.github.io/
知乎主頁：https://www.zhihu.com/people/cao-yang-49/activities
知乎專欄：https://zhuanlan.zhihu.com/ranmo
掘金： https://juejin.im/user/58f87ae844d9040069ca7507
osChina：https://my.oschina.net/u/3161824/blog
轉載請註明出處，謝謝。
歡迎關注我的公衆號
