转自：https://blog.51cto.com/u_15061951/4263737
原来的没有封装的代码：
<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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
从官网上看到，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text和textarea元素使用value属性和input事件
checkbox和radio使用checked属性和change事件
select使用value和change事件
因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，需要model选项，在定义组件的时候，指定prop的值和监听的事件。
model: {
prop: 'modelValue',
event: 'selectData'
},
1.
2.
3.
4.
model 选项中的prop 对应 =》 :value="modelValue" 的名字
model 选项中的 event 对应的是 this.$emit('selectData',val) 的 事件名字 this.$emit('selectData',val)
props 里面 的是 通过props传递，实现父组件值绑定到子组件的属性值
父组件：
引入子组件
import SelectCom from '../../components/Select/Select'
1.
使用组件
components: {
SelectCom
},
1.
2.
3.
<SelectCom label="基础风格" :listData="productStyleList" v-model="sty" prop="style" :multiple="multiple" @selectData="styl(e)" />
1.
productStyleList 是传递进去的数组
1.
v-model="sty" 双向绑定的值
1.
@selectData="styl(e)" ： 触发的事件
-----------------------------------
vue 自定义封装组件 使用 model 选项
https://blog.51cto.com/u_15061951/4263737