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

1. One-way value transfer between parent and child components

1. Passing value from parent to child
2. Passing value from child to father

2. Two-way binding of parent-child component data

Implementation ideas:

Pass values from parent to child components: use props attribute. ( props is the plural abbreviation of property )
Pass values from child to parent components: use custom events.

1. One-way value transfer between parent and child components

1. Passing value from parent to child

The parent passes the value to the child component, and after the child component receives the data, it saves it to its own variable.

//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>

Props is used to receive the value passed from the parent component. There are many ways to write props, such as:

//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, 
 } 
}

2. Passing value from child to father

The child passes values to the parent component mainly through custom events. The specific examples are as follows:

// 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} 
  } 
},

2. Two-way binding of parent-child component data

Vue 's data flows in one direction, and there has never been any two-way binding in vue . The two-way binding implemented by v-model is just syntactic sugar.

Method 1: Use watch to implement two-way data binding between parent and child components. The specific example is as follows:

<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 
   } 
  } 
 }  
})

Method 2: sync modifier to achieve two-way binding

Functionality provided by the .sync modifier in vue 1.x. When a child component changes the value of a prop with .sync, the change is also synchronized to the value bound in the parent component. This is convenient, but can also cause problems because it breaks the one-way data flow. (Data flows from top to bottom, events flow from bottom to top)

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

When the component needs to update the value of numb, an update event needs to be triggered:

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

The specific examples of use are as follows:

// 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); 
 } 
}

This is the end of this article about the two-way binding of parent-child component data in the front-end framework Vue. For more relevant content about two-way binding of parent-child component data in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: