vue 父子组件通信

//子组件
<template>
    <div>
        <button>+</button>
        <p><span>{{num}}</span></p>
    </div>
</template>
<script>
export default {
    props:['num'], //props接收父组件传来的值。num必须和父组件的命名一样
    methods:{
     
    }
}

//父组件

<template>
   <div>
       //动态改变num值需要用v-bind,子组件通$emit变量获取父组件的方法，接收事件名
        <Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter>
   </div>
</template>
<script>
import Counter from './child.vue'
export default {
  components:{Counter},
  data(){
      return{
          num:10,
      }
  },
  methods:{
      increment(){
          this.num++;
      },
      decrement(){
          this.num--;
      }
  }
}
</script>