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組件代碼貼出來，但願各位大佬多多指教。