本文首發(fā)于TalkingCoder，一個有逼格的程序員社區(qū)。轉(zhuǎn)載請注明出處和作者。
exportdefault{? ? ? ? data() {return{? ? ? ? ? ? ? ? id:1}? ? ? ? },? ? ? ? ready() {? ? ? ? ? ? setTimeout(() => {this.$broadcast('child-set-data', {? ? ? ? ? ? ? ? ? ? id:2});? ? ? ? ? ? },1000);? ? ? ? }? ? }exportdefault{? ? ? ? props: {? ? ? ? ? ? id: {? ? ? ? ? ? ? ? type:Number,default:0}? ? ? ? },? ? ? ? data() {return{}? ? ? ? },? ? ? ? methods: {? ? ? ? ? ? handler() { }? ? ? ? },? ? ? ? events: {? ? ? ? ? ? id() {this.handler();? ? ? ? ? ? }? ? ? ? }? ? }
這次是通過events來接收事件，效果是一樣的。既然兩者都可以，那如何優(yōu)雅的選擇呢，筆者覺得可以在數(shù)據(jù)功能上進行區(qū)分。比如上面的場景，是由子組件child在知道id改變后，在它自己的作用域里去執(zhí)行handler()方法，handler可能是一個需要ajax獲取數(shù)據(jù)并渲染到child組件上的函數(shù)，這時候就推薦用watch來監(jiān)聽id的改變了。如果handler所對應(yīng)的ajax任務(wù)是在父組件完成的，父組件需要將拿到的一堆json數(shù)據(jù)傳給child時，這時可以通過事件來傳遞。不過說到底，還是看使用者的習(xí)慣了，這兩者都是可以的，只不過事件更多的是來觸發(fā)外部環(huán)境的action。
管好組件的一畝三分地
用好prop的sync
上篇文章介紹過，組件間可以通過prop傳遞數(shù)據(jù)，而且使用sync還可以雙向綁定：
這樣id就是一個雙向的了，子組件修改后，父組件也會修改，但這樣做有時候會分不清到底是誰改的，也很可能會不小心就修改了父組件的值，所以在使用時要特別注意。
驗證prop
有時為了省事，在寫組件時就將props直接寫一個數(shù)組了，但如果你寫的組件是給別人用的，那還是建議對每個prop都進行嚴(yán)格的驗證，確保他人正確使用。具體驗證方法可查看文檔。
子組件不該干涉父組件的狀態(tài)
子組件可以通過$parent訪問到父組件，也就是說它有權(quán)利去修改父組件的狀態(tài)，但不建議這樣做，雖然有時候是省事了，但是這讓父子組件之間緊耦合，很難知道到底是誰來維護數(shù)據(jù)，而且你開發(fā)給別人用的組件，隨意修改了父級的狀態(tài)，這會讓使用者不知所措。所以子組件應(yīng)該只關(guān)心自己的數(shù)據(jù)，要修改父級狀態(tài)時，通過$dispatch()方法派發(fā)事件來通知父級，由父級自己修改。
總結(jié)
一口氣寫完這4篇文章，還真是有點辛苦啊。半年前還只是用Vue的一些簡單功能，到現(xiàn)在TalkingData的多條產(chǎn)品線已逐步使用這整套架構(gòu)，這個推動的過程還是很快的，也是真正意識到Vue是一個很出色的框架，對它充滿了信心。TalkingData接下來陸續(xù)上線的幾個重磅產(chǎn)品（Data Cloud、Marketing Cloud），也是證明了這一點。很快Vue2.0也要來了，對它更是充滿了期待。前端就是這么神奇，總有玩不盡的框架，但一定要選對一個適合自己的技術(shù)棧。
