Implementation ideas: Pass values from parent to child components: use 1. One-way value transfer between parent and child components 1. Passing value from parent to childThe 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 fatherThe 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 Method 1: Use <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: 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:
|
<<: MySQL detailed single table add, delete, modify and query CRUD statements
>>: Insufficient memory problem and solution when docker starts elasticsearch
In the past, float was often used for layout, but...
1. Install Docker yum -y install docker-io The &q...
Written in advance: In the following steps, you n...
In the table header, you can define the dark bord...
Step 1: Change DATABASES in setting.py # Configur...
1. Modify the Linux server docker configuration f...
Copy code The code is as follows: <style> ....
I saw this question in the SQL training question ...
This article records the installation and configu...
environment Host IP 192.168.0.9 Docker version 19...
Use Javascript to achieve the countdown effect, f...
Recently, there have been many database-related o...
The reuse of code in vue provides us with mixnis....
This article is intended to be a starting point f...