Implementation of two-way binding of parent-child component data in front-end framework Vue

//Parent component writing method <cld :numP="num" ></cld> 
 
//Subcomponent definition and data components:{ 
 cld:{ 
  template:'#child', 
  props:{ 
   numP:Number 
  }, 
 } 
} 
 
//Subcomponent content <template id="child"> 
 <div> 
  {{ numP }} 
 </div> 
</template> 

//Method 1: Directly receive data props: ['numP'] 
 
//Method 2: Add type restriction props: [ 
 numP: Number 
 ]  
 
//Method 3: Add default value props: [ 
 numP: { 
  type:Number, 
  default:0 
  } 
]  
 
//Method 4: Is it necessary to limit the value of props: [ 
 numP: { 
  type:Number, 
  default:0, 
  require:true //Add required value, if not, an error will be reported} 
]  
 
//Method 5: Using object form props: { 
 numP: { 
  type:Number, 
  default:0, 
 } 
} 

// Parent component content <div> 
 The data obtained by the child component is {{getNum}} 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
 
//Parent component methods methods:{ 
 getNumC(data){ 
  this.getNum = data //Receive data from child components} 
}, 
//Subcomponent definition components:{ 
 cld:{ 
  template:'#child', 
  data(){ 
   return { 
    numC:1314 //Subcomponent data definition} 
  }, 
  mounted(){ 
    this.$emit('accept', this.numC) // trigger custom event} 
  } 
}, 

<div id="app"> 
 Data<br>{{num}} 
 <input type="text" v-model="num"><br> 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
//Subcomponent content <template id="child"> 
 <div> 
  Data<br>{{childNum}} 
  <input type="text" v-model="childNum" /> 
 </div> 
</template> 
 
  <!-- Parent-child component communication--> 
const app = new Vue({ 
 el:'#app', 
  data:{ 
   num:'520', 
   }, 
  methods:{ 
   getNumC(data){ 
    this.num = data 
   } 
  }, 
  components:{ 
   cld:{ 
    template:'#child', 
    props:{ 
     numb:String 
    }, 
   data(){ 
    return { 
     childNum:0, 
    } 
   }, 
  watch:{ 
   numb:function(){ 
    this.childNum = this.numb 
   }, 
   childNum:function(){ 
    this.$emit('accept',this.childNum) 
    } 
   }, 
  mounted(){ 
   this.childNum = this.numb 
   } 
  } 
 }  
}) 

<cld :numb.sync="num" ></cld> 
// will expand to: 
<cld :numb="bar" @update:numb="val => bar = val"/> 

this.$emit("update:numb", newValue ); 

// Parent component <Father :foo.sync="foo"></Father> 
 
//child component props: ['foo'], 
data() { 
  return { 
   newFoo: this.foo; 
   } 
}, 
methods:{ 
 add:function(){ 
  this.newMsg=10; 
  this.$emit('update:foo',this.newFoo); 
 } 
}