本文首發(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ù)功能上進(jìn)行區(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都進(jìn)行嚴(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ù)棧劲装。
