Vue: v-model 语法糖

「「难度：🌟」」

「「口味：巧克力」」

经常使用v-model却不知道它的原理 做个备忘

• 栗子:使用V-model 双向数据绑定事件时

<input v-model = 'something'>

• 原理:只是一个语法糖

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

• 所以在组件里使用的时候,相当于下面的简写:

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

想要组件 v-model生效 它必须:

• 「接收一个value属性」
• 「在value值改变时 触发input事件」

使用v-model

<template>
  <input v-model="value" />
</template>

<script>
export default {
  conponents:{input}
  data(){
    return {
    value: "我是文本框里的value值"
    }
  }
}
</script>

使用v-bind 获取value v-on绑定input触发事件

<template>
  <input :value="value" @input="handleChange" />
</template>
<script>
  export default {
    components: { input },
    data () {
      return {
        value: "我文本框里的vaLue值"
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>

结论

v-model的原理就是v-bind数据绑定 与 v-on处理函数绑定的语法糖

「v-model的使用限制」

//主要在表单控件与组件上实现双向双向数据绑定
<select>
<textarea>
components组件

本文使用 mdnice 排版