Vue parent-child component two-way binding

Vue components have 2 major features:

1. Global components and local components

2. Data transfer between parent and child components

Next, use the demo directly to see how to pass values ​​(static pass values)

father.view

<template>
   <div>
        <Counter num="10"></Counter>//static pass value
   </div>
</template>
<script> 
import Counter from './child.vue' //Introduce child components 
export default {
  components:{Counter}, //Name the child component
  data(){
  }
}
</script>

child.vue

<template>
    <div>
        <button>+</button>
        <p><span>{{num}}</span></p>
    </div>
</template>
<script>
export default {
    props:['num'], //props receives the value from the parent component. num must be the same as the name of the parent component
    methods:{
    
    }
}
</script>

Dynamic pass by value

father.view

<template>
   <div>
       //To dynamically change the num value, you need to use v-bind, the child component gets the method of the parent component through the $emit variable, and receives the event name
        <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>

child.vue

<template>
    <div>
        <button @click="increment">+</button>
         <button @click="decrement">-</button>
        <p><span>{{num}}</span></p>
    </div>
</template>
<script>
export default {
    data(){
        return{}
    },
    props:['num'],
    methods:{
        increment(){
            this.$emit('incre'); //The method of getting the parent component, dynamically getting the num value of the parent component
        },
        decrement(){
            this.$emit('decre');
        }
    }
}
</script>