v-model爬坑记录

木风622
949 阅读3分钟

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

一、关于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用到组件上时，我们再来看下

二、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组件代码贴出来，希望各位大佬多多指教。


avatar
文章
阅读
粉丝