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

Ubuntu 18.04 obtains root permissions and logs in as root user

Written in advance: In the following steps, you n...

Steps for Django to connect to local MySQL database (pycharm)

Step 1: Change DATABASES in setting.py # Configur...

Idea deploys remote Docker and configures the file

1. Modify the Linux server docker configuration f...

Summary of commonly used multi-table modification statements in Mysql and Oracle

I saw this question in the SQL training question ...

MySQL 8.0.12 installation configuration method and password change

This article records the installation and configu...

Sample code for deploying ELK using Docker-compose

environment Host IP 192.168.0.9 Docker version 19...

Implementing countdown effect with javascript

Use Javascript to achieve the countdown effect, f...

Super detailed MySQL usage specification sharing

Recently, there have been many database-related o...

Detailed explanation of slots in Vue

The reuse of code in vue provides us with mixnis....