子向父通信
子向父的通信：$emit
來看這樣的一個案例：
<div id="app"><h2>num: {{num}}</h2><!--使用子組件的時候，傳遞num到子組件中--><counter :num="num"></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">Vue.component("counter", {// 子組件，定義了兩個按鈕，點擊數字num會加或減template:'\<div>\<button @click="num++">加</button> \<button @click="num--">減</button> \</div>',props:['num']// count是從父組件獲取的。})var app = new Vue({el:"#app",data:{num:0}}) </script>-
子組件接收父組件的num屬性
-
子組件定義點擊按鈕，點擊后對num進行加或減操作
我們嘗試運行，好像沒問題，點擊按鈕試試：
子組件接收到父組件屬性后，默認是不允許修改的。怎么辦？
既然只有父組件能修改，那么加和減的操作一定是放在父組件：
var app = new Vue({el:"#app",data:{num:0},methods:{ // 父組件中定義操作num的方法increment(){this.num++;},decrement(){this.num--;}} })但是，點擊按鈕是在子組件中，那就是說需要子組件來調用父組件的函數，怎么做？
我們可以通過v-on指令將父組件的函數綁定到子組件上：
<div id="app"><h2>num: {{num}}</h2><counter :count="num" @inc="increment" @dec="decrement"></counter> </div>在子組件中定義函數，函數的具體實現調用父組件的實現，并在子組件中調用這些函數。當子組件中按鈕被點擊時，調用綁定的函數：
Vue.component("counter", {template:'\<div>\<button @click="plus">加</button> \<button @click="reduce">減</button> \</div>',props:['count'],methods:{plus(){this.$emit("inc");},reduce(){this.$emit("dec");}}})-
vue提供了一個內置的this.$emit()函數，用來調用父組件綁定的函數
效果：
?
總結
