子向父通信
子向父的通信：$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()函数，用来调用父组件绑定的函数
效果：
总结
