vue 自定义封装组件使用 model 选项

自定义组件的 `v-model`

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

Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="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"><Optionv-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"><Optionv-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"><Optionv-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"><Optionv-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"><Optionv-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)" ><Optionv-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)"  ： 触发的事件

转载于:https://www.cnblogs.com/guangzhou11/p/11276098.html