提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue封装组件 自定义 model 选项 使用
2023-09-11 14:22:19 时间

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

 

 

相关文章