Detailed explanation of v-model instances in components

The magic of v-model

---

html

<div id="app">
 <input v-model="poin">
  {{ poin }}</div>

js

new Vue({
  el:'#app',
  data:{poin:'zqz'
  }})

Once we enter the value If something changes, the point value in data will also change.

Theoretically, an event will be triggered when the value in data changes, but we didn’t see it?

In fact, it is stated in the vue documentation:

<input v-model="something">

is the syntactic sugar below

<input v-bind:value="something" v-on:input="something = $event.target.value">

Every time we enter When the input event is triggered, input is bound to the inline function, thus changing the value of something.

Are you curious about what the input event is?

The DOM input event is triggered synchronously when the value of the d5fd7aea971a85678ba271703566ebfd or 4750256ae76b6b9d804861d8f69e79d3 element changes. (For input elements with type = checkbox or type = radio, the input event will not fire when the user clicks the control because the value attribute does not change.) Additionally, when the content changes, it fires on the contenteditable's editor . In this case, the event target is the edit host element. If there are two or more elements with contenteditable true, the "edit host" is the nearest ancestor element whose parent is not editable. Likewise, it will also fire on the root element of the designMode editor.

For details, see: MDN input event

v-model in the component

---

The v-model validity principle of the component

• Accepts a value attribute

• Triggers the input event# when there is a new value

##Let’s take a look at the code first

el-input.vue

d477f9ce7bf77f53fbcf36bec1b69b7a

    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeinput的封装94b3e26ee717c64999d7867364b1b4a3
      1813ca81a5bc6e5e4d9e4db5cb03ae09
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {
  name: 'el-input',
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  methods: {
    // 每次都会加一
    updateValue (value) {
      this.$refs.input.value = value + 1;
    },
    selectAll(event) {
      setTimeout(function () {
        event.target.select()
      }, 0)
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927

Use this component in Tom.vue

c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      581b752f8958e789522d96089d885571da9236a413cd032428793817d58785c2
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

Every time it is used, a 1 will be added at the end

But the question is, how do we get this value in Tom.vue?

• Method 1: Use events but it feels a bit curved to save the country

• Method 2: Use v-model

The power of v-model is reflected here, because the syntax sugar above automatically binds the

input event. So we can use this feature to do something.

Bind v-model to the component

Modify the code of Tom.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      42df839a2e7b33d0a8a98a26e44f5e5dda9236a413cd032428793817d58785c2
      eleValue的值:{{ this.eleValue }}
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  },
  data () {
    return {
      eleValue: 666 //设置一个默认值
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

Initial state

After input The status

Then when the value we input changes, the

eleValue we expected still does not change, and the value in el-input.vue does change.

That is to say, the value is not transferred (synchronized) to the parent component after it changes. This is the purpose of

.sync in vue1, but it has been abandoned in vue2.

Modify the el-input.vue code and add

this.$emit('input', value*1)

...updateValue (value) {  this.$refs.input.value = value + 1;  // 触发组件上绑定的input事件,以实现value同步  this.$emit('input', value*1)},...

This is it Realized value synchronization problem.

The above is the detailed content of Detailed explanation of v-model instances in components. For more information, please follow other related articles on the PHP Chinese website!