vue实现父子双向通信

<template>
<div>
<button v-on:click=increament>+</button>
<button @click=decreament>-</button>
<p>{{num}}</p>

</div>

</template>

<script>
export default {
props: ["num"],
methods: {
increament: function() {
this.$emit("incre");
},
decreament: function() {
this.$emit("decre");
}
}
}
</script>

<template>
<div class="hello">
<counter v-bind:num ="num" v-on:incre="increment" v-on:decre = "decrement"></counter>
<p>parent:{{num}}</p>
</div>
</template>

<script>
import counter from "./counter"
export default {
name: 'hello',
data () {
return {
num:10
}
},
components:{
counter
},
methods:{
increment:function(){
this.num ++;
},
decrement:function(){
this.num --;
}
}
}
</script>