[Vue basic knowledge summary 7] understand parent-child components in combination with two-way binding

nezha 2021-10-14 05:02:17

Java Learning route : Brick movers counter attack Java Architects

brief introduction :Java Quality creators in the field 、CSDN The author of the official account of the No 、Java Architects, strivers

Scan the QR code on the left side of the home page , Join the group chat , Learning together 、 Progress together  

Welcome to thumb up Collection Leaving a message.   

Catalog

One 、 First experience of front-end code

1、 Code instance

2、 Browser display

  Two 、 Improve according to exceptions

1、 Monitoring events , Reverse assignment

 2、 Code instance

3、 Browser display

3、 ... and 、 Linkage modification num1 Value

1、 Code instance

2、 Browser display

Four 、watch

5、 ... and 、 adopt $refs Complete parent access to child


Demand analysis :

Through the input box , The two-way binding text box displays .

One 、 First experience of front-end code

1、 Code instance

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn :number1="num1"
:number2="num2"/>
</div>
<template id="cpn">
<div>
<h2>{
{number1}}</h2>
<input type="text" v-model="number1">
<h2>{
{number2}}</h2>
<input type="text" v-model="number2">
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num1: 1,
num2: 0
},
components: {
cpn: {
template: '#cpn',
props: {
number1: Number,
number2: Number
},
}
}
})
</script>
</body>
</html>

2、 Browser display

error message

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "number1"

Google Translate -->

Avoid direct changes prop, Because whenever the parent component re renders , Values will be overridden . contrary , Use data or calculate attributes according to the value of the prop . The prop was mutated :“number1”

At this time, how to complete the two-way binding ?

The red exception shows , Hope that in data Define an additional attribute in .

Input box binding method :

  Two 、 Improve according to exceptions

1、 Monitoring events , Reverse assignment

 2、 Code instance

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn :number1="num1"
:number2="num2"/>
</div>
<template id="cpn">
<div>
<h2>{
{number1}}</h2>
<h2>{
{dnumber1}}</h2>
<input type="text" v-model="dnumber1">
<h2>{
{number2}}</h2>
<h2>{
{dnumber2}}</h2>
<input type="text" v-model="dnumber2">
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num1: 1,
num2: 0
},
components: {
cpn: {
template: '#cpn',
props: {
number1: Number,
number2: Number
},
data(){
return{
dnumber1:this.number1,
dnumber2:this.number2
}
}
}
}
})
</script>
</body>
</html>

3、 Browser display

3、 ... and 、 Linkage modification num1 Value

1、 Code instance

however , I want to pass it back to the parent component , That's change number1 Value , That's change data Medium num1, How do the whole ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn :number1="num1"
:number2="num2"
@num1change="num1change"
@num2change="num2change"/>
</div>
<template id="cpn">
<div>
<h2>props:{
{number1}}</h2>
<h2>data:{
{dnumber1}}</h2>
<!--<input type="text" v-model="dnumber1">-->
<input type="text" :value="dnumber1" @input="num1Input">
<h2>props:{
{number2}}</h2>
<h2>data:{
{dnumber2}}</h2>
<!--<input type="text" v-model="dnumber2">-->
<input type="text" :value="dnumber2" @input="num2Input">
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num1: 1,
num2: 0
},
methods: {
num1change(value) {
this.num1 = parseFloat(value)
},
num2change(value) {
this.num2 = parseFloat(value)
}
},
components: {
cpn: {
template: '#cpn',
props: {
number1: Number,
number2: Number
},
data() {
return {
dnumber1: this.number1,
dnumber2: this.number2
}
},
methods: {
num1Input(event) {
// 1. take input Medium value Assign values to the dnumber in
this.dnumber1 = event.target.value;
// 2. In order for the parent component to modify the value , Send out an event
this.$emit('num1change', this.dnumber1)
// 3. At the same time decorate dnumber2 Value
this.dnumber2 = this.dnumber1 * 100;
this.$emit('num2change', this.dnumber2);
},
num2Input(event) {
this.dnumber2 = event.target.value;
this.$emit('num2change', this.dnumber2)
// At the same time decorate dnumber2 Value
this.dnumber1 = this.dnumber2 / 100;
this.$emit('num1change', this.dnumber1);
}
}
}
}
})
</script>
</body>
</html>

2、 Browser display

Four 、watch

watch The key is to listen for changes in a property , It is a variant of the above writing .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn :number1="num1"
:number2="num2"
@num1change="num1change"
@num2change="num2change"/>
</div>
<template id="cpn">
<div>
<h2>props:{
{number1}}</h2>
<h2>data:{
{dnumber1}}</h2>
<input type="text" v-model="dnumber1">
<h2>props:{
{number2}}</h2>
<h2>data:{
{dnumber2}}</h2>
<input type="text" v-model="dnumber2">
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num1: 1,
num2: 0
},
methods: {
num1change(value) {
this.num1 = parseFloat(value)
},
num2change(value) {
this.num2 = parseFloat(value)
}
},
components: {
cpn: {
template: '#cpn',
props: {
number1: Number,
number2: Number,
name: ''
},
data() {
return {
dnumber1: this.number1,
dnumber2: this.number2
}
},
watch: {
dnumber1(newValue) {
this.dnumber2 = newValue * 100;
this.$emit('num1change', newValue);
},
dnumber2(newValue) {
this.number1 = newValue / 100;
this.$emit('num2change', newValue);
}
}
}
}
})
</script>
</body>
</html>

5、 ... and 、 adopt $refs Complete parent access to child

Parent-child component communication

In development , There is often some data that needs to be sent from the upper layer to the lower layer ;

Like in a page , We request a lot of data from the server , Part of the data , It's not a big part of our whole page , It needs to be displayed in sub components , At this time , It doesn't make the subcomponent request again , Instead, data is passed directly from the parent component to the child component .

So how to deliver ?

The official mentioned :

adopt props Passing data to subcomponents ;

Pass data to the parent component through events ;

Generally not recommended $children,$children It is generally used when getting all components .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<my-cpn></my-cpn>
<y-cpn></y-cpn>
<cpn ref="aaa"></cpn>
<button @click="btnClick"> Button </button>
</div>
<template id="cpn">
<div> I am a subcomponent </div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: ' How do you do '
},
methods: {
btnClick() {
// 1.$children
// console.log(this.$children);
// for (let c of this.$children) {
// console.log(c.name);
// c.showMessage();
// }
// Take the content of the third component , But the subscript value is not easy to use
// console.log(this.$children[3].name);
// 2.$refs => object type , The default is an empty object ref='bbb'
console.log(this.$refs.aaa.name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: ' It's my sub component name'
}
},
methods: {
showMessage() {
console.log('showMessage');
}
}
},
}
})
</script>
</body>
</html>

Java Learning route : Brick movers counter attack Java Architects

brief introduction :Java Quality creators in the field 、CSDN The author of the official account of the No 、Java Architects, strivers

Scan the QR code on the left side of the home page , Join the group chat , Learning together 、 Progress together  

Welcome to thumb up Collection Leaving a message.   

Past highlights

【Vue Basic knowledge summary 1】Vue introduction

【Vue Knowledge system summary 2】Vue Dynamic binding v-bind

【Vue Knowledge system summary 3】Vue Commonly used labels

【Vue Knowledge system summary 4】Vue Component development

【Vue Basic knowledge summary 5】Vue Implement the tree structure

【Vue Basic knowledge summary 6】Spring Boot + Vue The whole development of the stack , What front-end knowledge is needed ?

Please bring the original link to reprint ,thank
Similar articles

2021-10-14