持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

一、v-model

1. 作用

相信使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行<input>、<textarea>及 <select> 元素上数据的双向绑定的
例如:

<template>
 <div>
   <input v-model="value" type="text">   //这里的v-model里面的value可以直接获取到用户的输入值
 </div>
</template>

<script>
import son from '@/yanshi/son.vue'
 data() {
   return {
     value: ''    //这里定义的value变量可以直接将上面获取到的值进行操作
   }
 }
}
</script>
复制代码

当我们在input输入框里面输入了某个在值的时候,下面就可以直接获取到我们的输入值,而不需要操作dom元素进行获取

2.v-model的本质

v-model的本质上来说,是一个语法糖

目前咱们习惯性的写法是这样的:

<input v-model="val" type="text">
复制代码

但是实质上的完整写法:

<input :value="val"  @input="val=$event.target.value" />
复制代码

也可以将@input后面写成一个函数,然后在methods中进行赋值操作。

要理解这行代码，首先你要知道 input 元素本身有个input 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 input 事件，把最新的value值传给传递给val ,完成双向数据绑定的效果。

我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：

在给 <input />元素添加 v-model 属性时，默认会把 val作为元素的属性，然后把input事件作为实时传递 value 的触发事件

注意: 不是所有能进行双向绑定的元素都是input事件。

3. v-model的特殊用法

一般情况,咱们使用v-model主要是用于数据的双向绑定,可以十分方便的获取到用户的输入值。但在某些特殊情况下,我们也可以将v-model用于父子组件之间数据的双向绑定。这里需要用到父子传值的相关知识:

<template>
  <div>
    <son  v-model="num"/> //使用子组件
  </div>
</template>

<script>
import son from '@/yanshi/son.vue'   //引入子组件
export default {
  components: {
    son    //注册子组件
  },
  data() {
    return {
      num: 100
    }
  }
}
</script>
复制代码

这里咱们先定义了一个father组件和一个son组件,并且将son组件引入到father组件中,并且给son组件绑定了v-model进行了传值。此时,我们需要到son组件中接收这个值并且使用他:

<template>
  <div>
    我是son组件里面接收到的值: {{ value }}
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  }
}
</script>
复制代码

注意: 我们这里接收的值必须是value,写成其他名字将无法使用