当子组件需要向父组件传递数据时，就要用到自定义组件。
父组件也可以直接在子组件的自定义标签上使用v-once来监听子组件触发的自定义事件。
<div id="app">
<p>总数：{{total}}</p>
<my-component @increase="handleGetTotal"
@reduce="handleGetTotal"></my-component>
</div>
<script>
Vue.component("my-component",{
template:`<div>
<button @click="handleIncrease">+1</button>
<button @click="handleReduce">-1</button>
</div>`,
data(){
return{
counter:0
}
},
methods:{
handleIncrease(){
this.counter++;
this.$emit("increase",this.counter)
},
handleReduce(){
this.counter--;
this.$emit("reduce",this.counter)
}
}
});
new Vue({
el:"#app",
data:{
counter:0
},
methods:{
handleGetTotal(total){
this.total = total
}
}
})
</script>
个人理解：
<my-component>组件渲染的两个button，当点击第一个button时触发绑定的click事件同时触发函数handleIncrease，函数实现内部的counter++操作，并将加之后的值作为名字是increase的值传给父级，@increase，即点击第一个button的的时候执行handleIncrease函数传完值之后立刻执行父级的@increase="handleGetTotal"，执行handleGetTotal函数，用function接收传入的this.counter作为total值，this.total = total传给父级total，最后p标签调用的就是这个值。