組件通信
我們已經(jīng)知道，從父組件向子組件通信，通過 props 傳遞數(shù)據(jù)就可以了，但 Vue 組件通信的場(chǎng)景不止有這一種，歸納起來，組件之間通信可以用下圖表示。
單向數(shù)據(jù)流
單向數(shù)據(jù)流是父子組件的核心概念，props是單向綁定的。
當(dāng)父組件的屬性發(fā)生變化的時(shí)候，會(huì)傳導(dǎo)到子組件。但是反之，為了防止子組件無意間修改來父組件的狀態(tài)，從下往上的數(shù)據(jù)流是不允許的。
當(dāng)父組件屬性改變時(shí)，會(huì)傳進(jìn)子組件。而子組件的屬性改變時(shí)，會(huì)報(bào)錯(cuò)。
這樣的話可能覺得props有點(diǎn)雞肋，只能初始化組件的時(shí)候用，在子組件內(nèi)并不能進(jìn)行操作。其實(shí)還是有兩種辦法去操作props的：
1.定義一個(gè)局部變量，并用props初始化它，以后操作這個(gè)局部變量。
2.定義一個(gè)計(jì)算屬性，處理props的值并返回。
自定義事件
了解了組件對(duì)單向數(shù)據(jù)流，我們知道了組件從上至下是通過prop傳遞進(jìn)行通信的。那從下往上怎么辦呢？
vue規(guī)定子組件通過觸發(fā)事件來與父組件進(jìn)行通信。即父組件在調(diào)用子組件時(shí)，定義事件，子組件通過觸發(fā)這個(gè)事件來與父組件進(jìn)行通信。
子組件→父組件
當(dāng)子組件需要向父組件傳遞數(shù)據(jù)時(shí)，需要用到自定義事件。
Vue 組件有一套觀察者模式，子組件用 e m i t ( ) 來 觸 發(fā) 事 件 ， 父 組 件 用 emit()來觸發(fā)事件，父組件用emit()來觸發(fā)事件，父組件用on()來監(jiān)聽子組件的事件。
語法結(jié)構(gòu)：
父組件通過v-on:eventName="parentEventName"來設(shè)置監(jiān)聽
子組件通過$.emit(‘eventName’)來觸發(fā)事件
下面小編來舉個(gè)例子：
```//html代碼如下
<div?id="demo">
????????????父組件數(shù)據(jù)：{{number}}
????????????<!--?父組件通過v-on:eventName="parentEventName"來設(shè)置監(jiān)聽v-on簡(jiǎn)寫為：?-->
????????????<my-aaa?:num="number"?@shi-jian="bbFn"></my-aaa>????????????
</div>
//js代碼如下
Vue.component('my-aaa',{
????????????props:['num'],
????????????//?模板也是子組件
????????????template:`
????????????????<button?@click="jia">子組件點(diǎn)擊次數(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;
????????????????}
????????????}
????????})
????????```
