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

Posted 2022-05-30 guangzhou11

自定义组件的 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)"  ： 触发的事件