This is my second article about getting started

In this article, WE will share with you the differences between ve3. X and Ve2.

Before the order

V-bind v-ON v-bind v-bind v-bind

<! -- v-model -->
<input type="text" v-model="value">

<! -- v-bind and V-on -->
<input type="text" :value="value" @input="value = $event.target.value">

Copy the code

These two lines of code do the same thing.

Is article

Vue2. X is not combined with model options

Let’s start with a son component:

<template>
  <div class="son">
  <! Type ='text' --> $attrs = $attrs
    <input v-bind="$attrs" :value="value" @input="update">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String}},methods: {
    update(e) {
      this.$emit('input', e.target.value)
    }
  },
}
</script>
Copy the code

The parent implements the V-model using the child:

<template>
  <div class="parent">
    <! -- type='text' pass v-bind="$attrs" to input -->
    <son type='text' v-model="value"></son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      value: 'false'}}},</script>
Copy the code

Vue2. X combined with model options

Did you think it was over? No! And content. V-model is a combination of v-bind and V-ON. If you change the input type to checkbox, you will find that there is no two-way data binding.

Change the code

<template>
  <div class="son">
    <! V-bind ="$attrs" -->
    <input v-bind="$attrs" :checked="value" @change="update">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean}},methods: {
    update(e) {
      this.$emit('change', e.target.checked)
    }
  },
}
</script>

<template>
  <div class="parent">
    <! -- type='text' pass v-bind="$attrs" to input -->
    <son type='checkbox' v-model="value"></son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  data() {
    return {
      value: false}}},</script>
Copy the code

Why can’t we do that here?

The reason: Because v-model is a combination of v-bind and V-on. By default, V-bind is the value of the bind, v-on is the input event of the bind. In the first code, value and input correspond when input type is text. Then the binding values of type checkbox are checked and change, so it is invalid.

Note:

Text and Textarea elements use the value attribute and input event. Checkbox and Radio use the Checked attribute and change event. Select use the value and change event

So the Model option was added in VUe2.2. This allows you to change the default values for v-Models:

<template>
  <div class="son">
    <! V-bind ="$attrs" -->
    <input v-bind="$attrs" :checked="value" @change="update">
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value'.event: 'change'
  },
  props: {
    value: {
      type: Boolean}},methods: {
    update(e) {
      this.$emit('change', e.target.checked)
    }
  },
}
</script>
Copy the code

Only the child component is given the code here; the parent component’s code is the same as the previous one and is not modified.

The realization of vue3. X

The model option is not needed because of the v-model in combination with the.sync modifier, and only the code of type checkbox is pasted here.

Son:

<template>
  <input type="checkbox" :checked="modelValue" @change="change" >
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
   props: {
       modelValue: {
           type: Boolean}},setup(props, context) {
        const change = (e) = > {
            // Update :modelValue generates @update:modelValue
            context.emit('update:modelValue', e.target.checked)
        }
        return {
            change
        }
    }
})
</script>
Copy the code

parent:

<template>
  <div>
    {{ value }}
    <son v-model="value"></son>
  </div>
</template>

<script lang='ts'>

import { ref } from 'vue'
import son from './son.vue';

export default {
  components: {
    son
  },
  setup() {
    const value = ref(false)
    return {
      value
    }
  },
}
</script>
Copy the code

conclusion

• The ve2. X V-model binds value and input events by default

• Vue2. X changes the default values with events using the Model option

• Vue3. X can be changed directly by combining with.sync because the corresponding events are generated.