Shulou(Shulou.com)06/02 Report--

How to deeply understand v-model in vue2 and how to make components support this syntax? for this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

First, the essence of v-model is grammatical sugar.

"v-model is essentially nothing but grammatical candy. It is responsible for listening to user input events to update data, and to do some special handling for some extreme scenarios. "- official documents. [related recommendation: vue.js tutorial]

What is grammatical sugar?

Grammatical candy, in short, is a "convenient way to write".

In most cases, v foo model = "foo" is equivalent to: value= "foo" plus @ input= "foo = $event"

Yes, in most cases.

But there are exceptions:

Vue2 provides the model attribute to the component, which allows the user to customize the prop name of the passed value and the event name of the update value. Let's skip this for the time being, and we'll talk about it in more detail in section 4.

For native html native elements, vue does a lot of "dirty work" in order to make us ignore the differences of html in api. The left and right of the following elements are equivalent:

Textarea element:

Select drop-down box:

Input type='radio' radio check box:

Input type='checkbox' checkbox:

In programming thinking, this way of helping users "hide details" is called encapsulation.

Is v-model just grammatical sugar? (cold knowledge)

V-model is not just a grammatical sugar, it also has side effects.

The side effects are as follows: if v-model binds an attribute that does not exist on a responsive object, vue quietly increases this property and makes it responsive.

For example, look at the following code:

/ / template: / / script: export default {data () {return {user: {name: 'official account: fish to the front end',}

There is no user.tel attribute defined in responsive data, but user.tel is bound with v-model in template. Guess what happens when you type it?

Depending on the effect:

Find out: the tel attribute will be added to user, and the tel attribute will be responsive.

This is the effect of "side effect". Have you learned it?

Third, is v-model bidirectional binding or unidirectional data flow? 2.1 is v-model two-way binding?

Yes, it is officially said.

"you can use the v-model instruction to create two-way data bindings on forms, and elements. "--vue2 official documentation

2.2 is v-model an one-way data stream?

Yes, it is even a typical paradigm of one-way data flow.

Although the authorities have not made this point clear, we can sort out the relationship between the two.

What is a single data stream?

A child component cannot change the prop property passed to it by the parent component, and it is recommended that it throw an event informing the parent component to change the binding value itself.

What does v-model do?

The v-model approach is fully consistent with individual data streams. It even gives a specification for naming and event definition.

It is well known that the .sync modifier is another typical paradigm for unidirectional data flow.

"one-way data flow" can be summed up in eight words: "data down, event up".

How to make the components you develop support v-model

Although I don't want to talk about it, this is really a high-frequency interview question.

When defining a vue component, you can provide a model property that defines how the component supports v-model.

The model attribute itself has a default value, as follows:

/ / default model attribute export default {model: {prop: 'value', event:' input'}}

That is, if you don't define the model property, or if you define the property in a face-to-face way, when someone else uses your custom component, VMI model = "foo" is exactly equivalent to: value= "foo" plus @ input= "foo = $event".

If you make some modifications to the model property, as follows:

/ / default model attribute export default {model: {prop: 'ame', event:' zard'}}

Then, v foo model = "foo" is equivalent to: ame= "foo" plus @ zard= "foo = $event".

Yes, it's that easy. Let's look at an example.

First define a custom component:

We are TI {{ame}} champion plus or minus export default {props: {ame: {type: Number, default: 8}}, model: {/ / Custom v-model format prop: 'ame', / / represents the prop name bound by v-model event:' zard' / / Code v-model notifies the parent component of the event name of the update property} Methods: {playDota2 (step) {const newYear = this.ame + step this.$emit ('zard', newYear)}

Then we use this component in the parent component:

/ / export default {data () {return {ti: 8}} in template / / script

Look at the effect:

It's so easy to get your components to support v-model.

5. Demo and source code

To get the source code, please visit github

Https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model

On how to in-depth understanding of the v-model in vue2 and let the components support the grammar questions shared here, I hope the above content can be of some help to you, if you still have a lot of doubts to solve, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.