Read this article 📖
You will be:
- To understand:
v-model
What is grammar sugar?vue2
What special treatment is done to the native components? - To understand:
v-model
What is theUnidirectional data floworTwo-way data binding? - To understand:
v-model
Side effects beyond grammar sugar? - Learn how to make your components support too
v-model
Syntax.
A,v-model
The essence of grammar sugar.
“The V-Model is essentially just syntax sugar. It listens for user input events to update data and does some special processing for extreme scenarios.” — Official documents
What is grammar sugar?
Grammar sugar is simply “convenient writing”.
In most cases, v-model=”foo” is equivalent to :value=”foo” plus @input=”foo = $event”;
<! In most cases, the two statements are equivalent.
<el-input v-model="foo" />
<el-input :value="foo" @input="foo = $event" />
Copy the code
Yes, in most cases. But there are exceptions:
-
Vue2 provides model properties to components that allow users to customize prop names for passing values and event names for updating values. I’m going to skip that and talk about it in the fourth quarter.
-
For native HTML native elements, Vue does a lot of dirty work in order to make us ignore the differences in HTML API. The left and right ways of writing the following elements are equivalent:
textarea
Chemical element:
select
The drop-down box:
input type='radio'
Radio buttons:
input type='checkbox'
Boxes:
In programming terms, this way of helping users “hide details” is called encapsulation.
Is v-Model just grammar candy? (Cold knowledge)
V-model isn’t just grammar sugar, it has side effects.
The side effects are as follows: If the V-Model binds to a property that does not exist on a reactive object, vue will quietly increment that property and make it reactive.
As an example, look at the following code:
/ / in the template:
<el-input v-model="user.tel"></el-input>
/ / in the script:
export default {
data() {
return {
user: {
name: 'Public number: Front end to touch fish',}}}}Copy the code
The user. Tel attribute is not defined in the reactive data, but the Template is bound to the user.
See the effect:
Here’s the answer: A tel attribute will be added to user, and the tel attribute will be responsive.
That’s what side effects do. Have you learned?
Three,v-model
Is it two-way binding or one-way data flow?
2.1 v-model
Is it bidirectional binding?
Yes, officially.
“You can use the V-model directive to create two-way data binding on forms ,
2.2 thev-model
Is it a one-way data flow?
Yes, it’s even a typical paradigm for one-way data flow.
Although this is not officially stated, it is possible to clarify the relationship between the two.
- What is a single data stream?
A child component cannot change a prop property passed to it by its parent; instead, it is recommended that it throw an event telling the parent to change the binding value itself.
v-model
What is the practice of?
The V-Model approach is fully consistent with a single data flow. Even more, it provides a specification for naming and event definitions.
As is known to all.sync
Modifiers are another typical paradigm for one-way data flow.
One-way data flow can be summed up in just eight words: “Data down, events up”.
How to make the components you develop supportv-model
I hate to say it, but this is a very common interview question. 🤣
When defining a VUE component, you can provide a Model property that defines how the component supports V-Models.
The model property itself has default values as follows:
// The default model property
export default {
model: {
prop: 'value'.event: 'input'}}Copy the code
That is, if you don’t define model attributes, or if you define attributes in a physical way, v-model=”foo” is exactly equivalent to :value=”foo” plus @input=”foo = $event” when someone else uses your custom component.
If the Model properties were modified, they would look like this:
// The default model property
export default {
model: {
prop: 'ame'.event: 'zard'}}Copy the code
Then, v-model=”foo” is equivalent to :ame=”foo” plus @zard=”foo = $event”.
Yes, it’s that easy. Let’s look at an example.
Start by defining a custom component:
<template>
<div>We are TI{{ame}} champions<el-button @click="playDota2(1)">add</el-button>
<el-button @click="playDota2(-1)">Reduction of</el-button>
</div>
</template>
<script>
export default {
props: {
ame: {
type: Number.default: 8}},model: { // Customize the format of the V-model
prop: 'ame'.// Represents the prop name of the V-model binding
event: 'zard' // The code V-model notifies the parent component of the event name to update the property
},
methods: {
playDota2(step) {
const newYear = this.ame + step
this.$emit('zard', newYear)
}
}
}
</script>
Copy the code
We then use this component in the parent component:
/ / in the template
<dota v-model="ti"></dota>
/ / in the script
export default {
data() {
return {
ti: 8}}}Copy the code
Look at the results:
Getting your components to support v-Models is that easy.
Five, demo and source code
To obtain the source code, visit Github Zhangshichun’s Github
Sixth, the end
I’m Spring brother. I love vue.js, ElementUI, and Element Plus. My goal is to share the most practical and useful knowledge points with you. I hope you can leave work early, finish your work quickly, and feel calm 🐟.
You can follow me on the Nuggets, and you can also find me on the public account: Touch the fish in front. I hope you all have fun.