自定义组件的 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的model 选项可以用来避免这样的冲突:

Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})

现在在这个组件上使用 v-model 的时候:

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的属性将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

原来的没有封装的代码:

  <FormItem label="适用胸型" prop="chestShape">
<Select multiple v-model="chestShape" @on-change="changeChestShape">
<Option
v-for="(item,index) in chestShapeReqList"
:value="item.dictValue"
:key="index"
>{{ item.dictLabel }}</Option>
</Select>
</FormItem> <FormItem label="有无钢圈" prop="hasSteel">
<Select multiple v-model="hasSteel" @on-change="changeHasSteel">
<Option
v-for="(item,index) in hasSteelReqList"
:value="item.dictValue"
:key="index"
>{{ item.dictLabel }}</Option>
</Select>
</FormItem> <FormItem label="功能" prop="hasFunction">
<Select multiple v-model="hasFunction" @on-change="changwHasFunction">
<Option
v-for="(item,index) in hasFunctionReqList"
:value="item.dictValue"
:key="index"
>{{ item.dictLabel }}</Option>
</Select>
</FormItem> <FormItem label="压力" prop="pressure">
<Select multiple v-model="pressure" @on-change="changePressure">
<Option
v-for="(item,index) in pressureReqList"
:value="item.dictValue"
:key="index"
>{{ item.dictLabel }}</Option>
</Select>
</FormItem> <FormItem label="组合形式" prop="makeupType">
<Select multiple v-model="makeupType" @on-change="changeMakeupType">
<Option
v-for="(item,index) in makeupTypeReqList"
:value="item.dictValue"
:key="index"
>{{ item.dictLabel }}</Option>
</Select>
</FormItem>

这段代码里面的相识度很高  我们可以封装起来

子组件 :

新建文件  select/seclect.vue

<template>
<FormItem :label="label" :prop="prop">
<Select :multiple="multiple" v-if="listData.length>0" :value="modelValue" @change="updateVal($event.target.value)" >
<Option
v-for="(item,index) in listData"
:value="item.dictValue"
:key="index"
>{{ item.dictLabel }}</Option>
</Select>
</FormItem>
</template>
<script>
export default {
name: 'com-select',
props: {
listData: {
type: Array,
default: () => []
},
label:String,
multiple:Boolean,
prop:String,
modelValue:Array,
},
model: {
prop: 'modelValue',
event: 'selectData'
},
data () {
return { }
},
computed: { },
methods: {
updateVal(val){
this.$emit('selectData',val)
} }
}
</script>

从官网上看到,v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:

text和textarea元素使用value属性和input事件

checkbox和radio使用checked属性和change事件

select使用value和change事件

因为自定的组件并没有默认的value和input事件,在使用时,我们需要按照上面那样显式的去声明定义这些东西。这时,需要model选项,在定义组件的时候,指定prop的值和监听的事件。

 model: {
prop: 'modelValue',
event: 'selectData'
},

model 选项中的prop   对应 =》   :value="modelValue"  的名字

model 选项中的   event   对应的是    this.$emit('selectData',val)  的  事件名字   this.$emit('selectData',val)

props  里面 的是   通过props传递,实现父组件值绑定到子组件的属性值
 
 

父组件:

引入子组件

import SelectCom from '../../components/Select/Select'

使用组件

  components: {
SelectCom
},
  <SelectCom  label="基础风格"  :listData="productStyleList"  v-model="sty"   prop="style"   :multiple="multiple"    @selectData="styl(e)" />  
productStyleList  是传递进去的数组   
v-model="sty"  双向绑定的值
@selectData="styl(e)"  : 触发的事件
 

vue 自定义封装组件 使用 model 选项的更多相关文章

  1. vue自定义全局组件(自定义插件)

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...

  2. vue 自定义报警组件

    1.自定义报警组件 Alarm.vue <!-- 报警 组件 --> <template> <div class="alarm"> <!- ...

  3. vue自定义select组件

    1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据, ...

  4. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  5. Vue自定义日历组件

    今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart ...

  6. vue自定义分页组件---切图网

    vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...

  7. vue自定义日期组件

    vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 ...

  8. vue 自定义image组件

    介绍 1:当图片加载失败时,给出错误提示. 2:当图片加载中时,给出加载提示. 3:图片处理模式:等比缩放/裁剪/填充/... 1.图片加载状态处理 通过给图片绑定load事件与error事件处理函数 ...

  9. Vue 自定义事件 && 组件通信

    1 App.vue 2 <template> 3 <!-- 4 组件的自定义事件: 5 1.一种组件间通信的方式,使用于:子组件===>父组件 6 2.使用场景:A是父组件,B ...

随机推荐

  1. hashcode native

    hashcode Java中的hashCode方法就是根据一定的规则将与对象相关的信息(比如对象的存储地址,对象的字段等)映射成一个数值,这个数值称作为散列值. 在设计hashCode方法和equal ...

  2. 小白的git克隆流程clone

    首先你进去你要存放代码的位置,比如将代码存放到D盘,然后在D盘中右键,点击Git Bash Here,就是说本地仓库要在D盘建立. 然后出现git 命令行界面,然后输入命令:git clone + 远 ...

  3. log4j.properties 输出指定类日志

    比如,我只要众多日志中,红色框的日志,则可以指定类:com.dangdang.ddframe.rdb.sharding.parser.SQLParserFactory 修改配置文件: 再次输出结果为:

  4. Jmeter之Switch Controller

    在测试过程中,各种不同的情况需要执行不同的操作,这个时候用if控制器比较麻烦,此时就可以使用Switch Controller代替. 一.界面显示 二.配置说明 1.名称:标识 2.注释:备注 3.S ...

  5. centos 7 lnmp环境编译安装zabbix-3.4.14

    一.安装环境(zabbix3.0需要php在5.5版本以上) [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Cor ...

  6. vue组件的watch属性

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. vue组件生命周期

    分为4个阶段:create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeM ...

  8. altium笔记转载

    原理图的设计 1.左键单击元器件按住space键可以将其旋转,按X键左右旋转:按Y键上下旋转. 2.智能粘贴:Edit àsmart paste . 3.屏障:compile mask(编译时被屏障的 ...

  9. 【ABAP系列】SAP ABAP 模拟做成像windows一样的计算器

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP 模拟做成像wind ...

  10. js 获取屏幕宽高

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...