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

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

原文地址:https://www.cnblogs.com/guangzhou11/p/11276098.html

时间: 2024-10-06 13:24:16

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

教你撸一个简单的Vue自定义动态组件

components下创建 toast 文件夹, 文件夹里面创建 toast.vue 和 index.js toast.vue: <template> <div id="toastWrap" :class="[className,showAnimation ?'fadein':'fadeout',appointId==''?'fixed':'absolute']" v-if="show"> <span :class=

vue自定义select组件

1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据,但在我平时用v-model只是在input中使用过,只知道v-model可以双向绑定数据,但并不清楚其中的实现过程,所以 需要清晰的了解v-model是什么,如下. <input v-model="test"/> <input :value="test"

Vue自定义日历组件

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

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

vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重新切图,重新VUE开发的项目来说,自定义分页组件才是应万变的最佳打开方式. html <template> <div class="pagination" v-if="totalPage>1"> <span v-if="!s

vue自定义日期组件

vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 calendar 的样式 Props type(String): 默认 single(选择单天),可选 range(选择多天) / time(选择单天 + 时间) isAbandon(Boolean): 默认 true,早于系统日期的日期选项是否不可选 showInput(Boolean): 默认

vue 自定义模版组件

vue的组件可以自定义内容,属性 又有slot作配合 可以做出很多自定义模版 例子 <body> <div id="app"> <m-modal modal-title="提醒" @on-ok="ok"></m-modal> <m-modal> <ul slot="modal-content"> <li v-for="item of lis

vue 自定义image组件

介绍 1:当图片加载失败时,给出错误提示. 2:当图片加载中时,给出加载提示. 3:图片处理模式:等比缩放/裁剪/填充/... 1.图片加载状态处理 通过给图片绑定load事件与error事件处理函数来判断图片加载状态.当图片加载完成时会触发load事件:图片加载出错会触发error事件 // 样本 <img src="..." @load=onLoad @error=onError> 2.图片模式 通过css属性 object-fit(https://developer.

Vue自定义插件(组件)Loading

vue.use()方法可以用来注册组件或者插件. 只要传入一个install()方法既可以注册 install(Vue,option){} 可以通过几种方式来自定义开发 Vue.$loading = -//直接挂载在Vue类上 Vue.propertype.$loading = -//直接挂载在Vue原型链上,可以通过this.$loading调用 Vue.component()//注册一个全局组件 Vue.directive()//注册全局指令 Vue.mixin()//全局混入,可以理解为继

iOS开发——UI篇Swift篇&amp;玩转UItableView(四)自定义&amp;封装

UItableView自定义&封装 一:Model 1 class AppsModel: NSObject { 2 3 //定义模型的三个属性 4 var imageName:String! //图片名称 5 var appName:String! //应用名称 6 var appDescription:String! //应用描述 7 8 9 10 //自定义初始化方法 11 init(imageName image_Name:String , app_Name:String , app_De