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

nezha 2021-10-14 05:02:17
vue basic knowledge summary understand


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 ?

版权声明
本文为[nezha]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211002145624988a.html

  1. Html + CSS + JS implémentation ️ Responsive Lucky Turnover ️ [with full source Sharing]
  2. Ren Jialun, who married young, was in a mess. Now she feels that it is a blessing in disguise
  3. 达梦数据库使用disql生成html格式的巡检报告
  4. React render phase parsing II - beginwork process
  5. Tableau linéaire de la structure des données (dessin à la main)
  6. In 2022, what are the highlights and popular elements in skirts to make skirts more elegant and gentle?
  7. JQuery installation
  8. Exemple de développement Android, dernière compilation de questions d'entrevue Android
  9. Differences and relations between JDK, JRE and JVM, nginx architecture diagram
  10. 【Azure 云服务】Azure Cloud Service 为 Web Role(IIS Host)增加自定义字段 (把HTTP Request Header中的User-Agent字段增加到IIS输出日志中)
  11. 【Azure 云服务】Azure Cloud Service 为 Web Role(IIS Host)增加自定义字段 (把HTTP Request Header中的User-Agent字段增加到IIS输出日志中)
  12. Questions d'entrevue pour les ingénieurs en développement Android, Android Foundation 72 questions
  13. It's kind of Cadillac CT6 to have a Mercedes Benz S-class captain and a 10At entry-level configuration, falling to less than 300000
  14. H6 meets the strong enemy again! The car body has a Cayenne visual sense, breaking 8.8 seconds, and the top configuration is less than 130000
  15. How nginx supports HTTPS and Linux kernel video tutorial
  16. Le martyr se réjouit de sa vieillesse Audi R8 V10 performance Rwd
  17. import 方式隨意互轉,感受 babel 插件的威力
  18. Le mode d'importation peut se déplacer librement pour sentir la puissance du plug - in Babel
  19. Pas de héros en termes de ventes!Du point de vue de la force du produit, la nouvelle version ax7 Mach est plus forte que H6
  20. The vue3 + TS project introduces vant as needed
  21. 深入浅出虚拟 DOM 和 Diff 算法,及 Vue2 与 Vue3 中的区别
  22. 深入淺出虛擬 DOM 和 Diff 算法,及 Vue2 與 Vue3 中的區別
  23. Explorer les algorithmes DOM et diff virtuels et les différences entre vue2 et vue3
  24. 两万字Vue基础知识总结,小白零基础入门,跟着路线走,不迷路(建议收藏)
  25. Résumé des connaissances de base de 20 000 mots vue, Introduction à la petite base blanche zéro, suivre la route et ne pas se perdre (Collection recommandée)
  26. 兩萬字Vue基礎知識總結,小白零基礎入門,跟著路線走,不迷路(建議收藏)
  27. "Talk show conference 4" Zhou qimo a remporté le championnat. Tout le monde l'admire. Il est mature et stable et a une vue d'ensemble
  28. Test logiciel entrevue non technique questions classiques - mise à jour continue!
  29. Digital forward disassembly reverse disassembly
  30. Analyse du cache distribué redis et essence de l'entrevue en usine v6.2.6
  31. [Hadoop 3. X series] use of HDFS rest HTTP API (II) httpfs
  32. Zhang Daxian sang in the morning to bless the motherland, xYG team: singing is much better than us
  33. My three years' experience -- avoiding endless internal friction
  34. Introduction à l'algorithme "dénombrement binaire" modéré 01 - - question d'entrevue leetcode 10.09. Recherche de matrice de tri
  35. Introduction à l'algorithme simple 06 - - leetcode 34. Trouver la première et la dernière position d'un élément dans un tableau de tri
  36. CSS animation
  37. Explain the new tags in HTML5 and the pseudo classes and pseudo elements in CSS3
  38. They are all talking about "serverless first", but do you really understand serverless?
  39. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  40. Front and back end data interaction (VI) -- advantages, disadvantages and comparison of Ajax, fetch and Axios
  41. Front and back end data interaction (V) -- what is Axios?
  42. Front and back end data interaction (III) -- Ajax encapsulation and call
  43. 前端 100 万行代码是怎样的体验?
  44. 湖中剑 前端周刊 #10(ESLint8、Web 端侧 AI、react-if)
  45. 湖中劍 前端周刊 #10(ESLint8、Web 端側 AI、react-if)
  46. 前端 100 萬行代碼是怎樣的體驗?
  47. Huzhong Sword Front End Weekly # 10 (eslint8, Web end ai, React if)
  48. Quelle est l'expérience du premier million de lignes de code?
  49. Pancakeswap front-end source compilation and deployment Linux
  50. Pancakeswap front-end source compilation - Windows
  51. Walls and columns are powered, and 50W transmission power is available in any corner. The University of Tokyo has built a wireless charging house
  52. Pas besoin d'embrayage pour allumer une voiture?Vieux conducteur: la voiture est très blessée par des erreurs. Ces mauvaises habitudes doivent être changées!
  53. Cadre de développement Android MVP, résumé de l'entrevue
  54. [Azure Cloud Service] Azure Cloud Service ajoute des champs personnalisés pour le rôle Web (hôte IIS) (ajoute le champ user agent dans l'en - tête de demande http au Journal de sortie IIS)
  55. Principes de la plate - forme de développement Android, questions d'entrevue de développement Android
  56. [Azure Cloud Service] Azure Cloud Service ajoute des champs personnalisés pour le rôle Web (hôte IIS) (ajoute le champ user agent dans l'en - tête de demande http au Journal de sortie IIS)
  57. Weilai es8 was listed in Norway and SAIC's driverless concept car appeared at the World Expo
  58. One of the most high-frequency algorithm problems in the front end! Reverse linked list
  59. Échange de doigts d'épée 11. Nombre minimum de tableaux rotatifs
  60. Questions et réponses à l'entrevue Big Data (réimprimé)