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

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

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:
  • Example code of vue custom component to implement v-model two-way binding data
  • The principle and implementation of two-way binding in Vue2.x
  • A brief discussion on the principle of Vue's two-way event binding v-model
  • Using js to implement the two-way binding function of data in Vue2.0
  • How to implement two-way binding function in vue.js with pure JS
  • Detailed explanation of Vue two-way binding

<<:  MySQL detailed single table add, delete, modify and query CRUD statements

>>:  Insufficient memory problem and solution when docker starts elasticsearch

Recommend

Creation, constraints and deletion of foreign keys in MySQL

Preface After MySQL version 3.23.44, InnoDB engin...

Implementation of mysql8.0.11 data directory migration

The default storage directory of mysql is /var/li...

How to configure MGR single master and multiple slaves in MySQL 8.0.15

1. Introduction MySQL Group Replication (MGR for ...

How to create a responsive column chart using CSS Grid layout

I have been playing around with charts for a whil...

HTML displays ellipsis beyond the text... implemented through text-overflow

You need to apply CSS to div or span at the same t...

Analysis of the implementation process of three modes of VMWare network adapter

Three modes Bridged (bridge mode), NAT (network a...

How to disable IE10's password clear text display and quick clear function

IE10 provides a quick clear button (X icon) and a ...

Docker installs redis 5.0.7 and mounts external configuration and data issues

Redis is an open source NoSQL database written in...

Tutorial on upgrading from Centos7 to Centos8 (with pictures and text)

If you upgrade in a formal environment, please ba...

Solution to the failure of entering the container due to full docker space

Since the problem occurred rather suddenly and th...

Is it necessary to create a separate index for the MySQL partition field column?

Preface Everyone knows that the partition field m...

Summary of various methods for JS data type detection

Table of contents background What are the methods...