Scenario: The interaction methods between parent and child components that we commonly use are: Today, we implement interaction in another way, referring to the v-model of the input box to implement two-way data binding of custom components. Subcomponent definition: Since the props attribute value cannot be modified directly, we define valueData here, receive the value in real time by listening, and modify valueData through the click method. The code is as follows: <template> <div> <div>{{ `Subcomponent value: ${value}` }}</div> <div @click="click">Click here to modify the value</div> </div> </template> <script> export default { name: "", model: { prop: "value", event: "change" }, props: { value: Number }, components: {}, data() { return { valueData: "" }; }, watch: value(newValue, oldValue) { this.valueData = newValue; console.log(`Subcomponent value: ${newValue}`); } }, created() { }, mounted() { }, methods: { click() { this.valueData++; this.$emit("change", this.valueData); } } }; </script> <style lang='less' scoped> </style> Parent component definition: The parent component binds the text value through v-model. The name is not necessarily value, it can be any other string that conforms to the naming convention, here it is text. The code is as follows: <template> <div> <div>{{ `Parent component value: ${text}` }}</div> <div @click="click">Click here to modify the value</div> <span>-----------------------------------------------------------</span> <test-children v-model="text"></test-children> </div> </template> <script> import TestChildren from "@/views/TestChildren"; export default { name: "", components: { TestChildren }, data() { return { text: 1 }; }, created() { }, mounted() { }, watch: text(newValue, oldValue) { console.log(`parent component value: ${newValue}`); } }, methods: { click() { this.text--; } } }; </script> <style lang='less' scoped> </style> result: Directly copy the code to your own project for testing. Whether the value is changed by the parent component or the child component. The values of the two components bound by v-mode are always consistent. Q&A: A classmate asked, isn't this the same as flowing data downward through props and then passing data upward through $emit? It can also achieve the effect of two-way binding like mine. In fact, if we don’t use v-model, we will inevitably write the following code in the parent component: <test-children @change="changeText"></test-children> Then modify the text value by defining the changeText method. Imagine that when our page is more complex and the number of referenced components is larger, we need to define more than ten or twenty methods like this in the page. The number of readable lines is greatly reduced, increasing maintenance costs. Extensions: After vue2.3, the sync method is provided, which can also realize two-way binding Writing in the parent component: <test-children :value.sync="text"></test-children> The following model definition is not needed in the subcomponent, just delete it. model: { prop: "value", event: "change" }, Passing data to the parent component uses the following method: this.$emit("update:value", this.valueData); The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: JavaScript source code for Elimination
>>: Detailed explanation of why v-if and v-for in Vue are not recommended to be used together
Table of contents The concept of affairs The stat...
Recently, when I was learning Django, I needed to...
1. Go to the official website: D:\mysql-5.7.21-wi...
Under the instructions of my leader, I took over ...
After installing MySQL, enter mysql -u root -p in...
Table of contents Preface: 1.Brief introduction t...
Preface After installing MySQL and Navicat, when ...
Preface: I reinstalled win10 and organized the fi...
Download the compressed version of MySQL-5.7.11-w...
Question: Although the index has been created, wh...
Here we only introduce the relatively simple inst...
Today I encountered the MySQL service 1067 error ...
Preface Recently, I accidentally discovered MySQL...
The show processlist command is very useful. Some...
Table of contents Is real-time update required? M...