Read this article 📖

You will be:

  • To understand:v-modelWhat is grammar sugar?vue2What special treatment is done to the native components?
  • To understand:v-modelWhat is theUnidirectional data floworTwo-way data binding?
  • To understand:v-modelSide effects beyond grammar sugar?
  • Learn how to make your components support toov-modelSyntax.

A,v-modelThe 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:

  1. 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.

  2. 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:

  • textareaChemical element:

  • selectThe 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-modelIs it two-way binding or one-way data flow?

2.1 v-modelIs it bidirectional binding?

Yes, officially.

“You can use the V-model directive to create two-way data binding on forms ,

2.2 thev-modelIs 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-modelWhat 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.syncModifiers 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.