組件通信
我們已經(jīng)知道抡驼，從父組件向子組件通信，通過 props 傳遞數(shù)據(jù)就可以了肿仑，但 Vue 組件通信的場景不止有這一種致盟，歸納起來，組件之間通信可以用下圖表示尤慰。
單向數(shù)據(jù)流
單向數(shù)據(jù)流是父子組件的核心概念馏锡，props是單向綁定的。
當父組件的屬性發(fā)生變化的時候伟端，會傳導到子組件杯道。但是反之，為了防止子組件無意間修改來父組件的狀態(tài)责蝠，從下往上的數(shù)據(jù)流是不允許的党巾。
當父組件屬性改變時，會傳進子組件霜医。而子組件的屬性改變時齿拂，會報錯。
這樣的話可能覺得props有點雞肋肴敛，只能初始化組件的時候用署海，在子組件內(nèi)并不能進行操作。其實還是有兩種辦法去操作props的：
1.定義一個局部變量值朋，并用props初始化它叹侄，以后操作這個局部變量。
2.定義一個計算屬性昨登，處理props的值并返回趾代。
自定義事件
了解了組件對單向數(shù)據(jù)流，我們知道了組件從上至下是通過prop傳遞進行通信的。那從下往上怎么辦呢岗屏？
vue規(guī)定子組件通過觸發(fā)事件來與父組件進行通信。即父組件在調(diào)用子組件時洲炊，定義事件飘哨，子組件通過觸發(fā)這個事件來與父組件進行通信胚想。
子組件→父組件
當子組件需要向父組件傳遞數(shù)據(jù)時，需要用到自定義事件芽隆。
Vue 組件有一套觀察者模式浊服，子組件用 e m i t ( ) 來 觸 發(fā) 事 件 ， 父 組 件 用 emit()來觸發(fā)事件胚吁，父組件用emit()來觸發(fā)事件牙躺，父組件用on()來監(jiān)聽子組件的事件。
語法結(jié)構(gòu)：
父組件通過v-on:eventName="parentEventName"來設置監(jiān)聽
子組件通過$.emit(‘eventName’)來觸發(fā)事件
下面小編來舉個例子：
```//html代碼如下
<div?id="demo">
????????????父組件數(shù)據(jù)：{{number}}
????????????<!--?父組件通過v-on:eventName="parentEventName"來設置監(jiān)聽v-on簡寫為：?-->
????????????<my-aaa?:num="number"?@shi-jian="bbFn"></my-aaa>????????????
</div>
//js代碼如下
Vue.component('my-aaa',{
????????????props:['num'],
????????????//?模板也是子組件
????????????template:`
????????????????<button?@click="jia">子組件點擊次數(shù){{ziNumber}}</button>`,
????????????data(){
????????????????return{
????????????????????ziNumber:this.num???????????????????
????????????????}
????????????},
????????????methods:{
????????????????jia(){
????????????????????this.ziNumber++;
????????????????????<!--?子組件通過$.emit('eventName')來觸發(fā)事件?-->
????????????????????this.$emit("shi-jian",this.ziNumber)
????????????????}
????????????}???????
????????})??????
????????var?demo=new?Vue({
????????????el:"#demo",
????????????data:{
????????????????number:6
????????????},
????????????methods:{
????????????????bbFn(canshu){
????????????????????console.log(canshu)
????????????????????this.number?=?canshu;
????????????????}
????????????}
????????})
????????```
