调用的子组件中使用v-model绑定数据以及使用@调用方法

实例:

子组件my-date-picker:

javascript 复制代码
<!--
  * @description: 日期组件二次封装
  * 解决 "日期为区间时,后端不支持传数组,而要传#分割的字符串" 
-->
<template>
  <el-date-picker
    class="comp-my-date-picker"
    v-model="date"
    v-bind="$attrs"
    v-on="$listeners"
    :value-format="valueFormat"
    @change="change"
  ></el-date-picker>
</template>

<script>
export default {
  name: 'my-date-picker',
  model: {
    prop: 'value',
    event: 'customInput'
  },
  props: {
    /** 双向绑定值 */
    value: {
      type: [String, Array],
      default: ''
    },
    /** 当 type = daterange 时,数组拼接字符串所用的分隔符,默认# */
    separator: {
      type: String,
      default: '#'
    },
    /** 双向绑定的值是否转换成以separator分割的字符串 */
    convertToStr: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val && val.split && val.split(this.separator).length === 2) {
          this.date = val.split(this.separator)
        } else {
          this.date = val
        }
      },
      immediate: true
    }
  },
  computed: {
    valueFormat() {
      return this.$attrs['value-format'] || this.$attrs.type === 'datetime' || this.$attrs.type === 'datetimerange'
        ? 'yyyy-MM-dd HH:mm:ss'
        : 'yyyy-MM-dd'
    }
  },
  data() {
    return {
      date: null
    }
  },
  created() {},
  mounted() {},
  methods: {
    change(val) {
      this.$emit('customInput', Array.isArray(val) && this.convertToStr ? val.join(this.separator) : val)
    }
  }
}
</script>
<style lang="less" scoped></style>

父组件:

html 复制代码
 <my-date-picker
      v-model="searchData.querydate"
      type="daterange"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      @customInput="search"
   />

提示: 在子组件中使用v-bind="attrs" v-on="listeners"就能够绑定子组件中的所有属性和方法,父组件调用使用它也能够直接使用它的属性和方法。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python