v-model爬坑记录

近期写了一个简单的checkbox组件，其中关于v-model的相关使用，把本身坑了一下，显然是基础太差，因而经过查阅文档和网上大佬的文章，简单本身总结下v-model的使用，以及简单描述下checkbox组件的开发。

1、关于v-model

引用官网上的介绍：

你能够用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上建立双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 在内部为不一样的输入元素使用不一样的属性并抛出不一样的事件：
text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 做为 prop 并将 change 做为事件。

看文字永远都是晦涩难懂的，直接上代码看看：

<input v-model="message"  >
/** 上面代码实际至关于：
    <input :value="message" @input="e => message = e.target.value" placeholder="edit me"> 
**/
<p>Message is: {{ message }}</p>复制代码

实际上v-model至关于作了两件事：一是经过v-bind:value将对应的值传过去，另外一个是绑定input默认事件，用于修改值。

一样道理，对于checkbox来讲

<input type="checkbox" id="checkbox" v-model="checked">
/** 上面代码实际至关于：
    <input type="checkbox" id="checkbox" :checked="checked" @change="e => checked = e.target.checked"> 
**/复制代码

以上说的都是简单的调用方式，当v-model用到组件上时，咱们再来看下

2、v-model用在组件上

好比咱们写一个checkbox的组件，而后在父组件调用能够这么写：

//====子组件Checkbox
<template>      <div>        <input          type="checkbox"          :checked="value"          @change="$emit('input', $event.target.checked)"        />        <label :for="label">{{ label }}</label>  </div></template>

props: ['value']

//====父组件<Checkbox v-model="checkStr"></Checkbox>...
data(){
  return {
     checkOne: {label: '手机', value: 10},
     checkStr: ''  }
}复制代码

能够看到父组件调用的时候咱们只传了一个v-model，可是在子组件上咱们分别引入了checked和一个父级的input事件，其实原理同上，给组件添加 v-model 属性时，默认会把 value 做为组件的属性，而后把 'input' 值做为给组件绑定事件时的事件名。

在vue2.2版本以后，加入了model属性，使用起来更加方便，包括两个属性：prop和event，分别表明着属性名和事件名，咱们可使用本身的名字单独定义~

//====子组件Checkbox
<template>
  <div>
    <input type="checkbox" :checked="propVal" @change="$emit('changes', $event.target.checked)" />     <label :for="label">{{ label }}</label> 
  </div>
</template>

props: ['propVal']model: {
    prop: 'propVal',
    event: 'changes'
}

//====父组件<Checkbox v-model="checkStr"></Checkbox>...
data(){
  return {
     checkOne: {label: '手机', value: 10},
     checkStr: ''  }
}复制代码

此时不管父组件传什么值进来，咱们均可以经过从新定义，在组件内部本身调用。

以上是本身的理解，语言表达好像比较差，不太理解的能够去看看文档，本身写一下就行了~后面会把简单的checkbox组件代码贴出来，但愿各位大佬多多指教。