vue 二次封装组件（时间插件）

子组件 MdatePicker.vue

<template>
  <date-picker
    v-bind="$attrs"
    @input="onInput($event)"
    @change="e => onChange(e)"
    @open="onOpen"
    :class="size === 'small' ? 'small-picker' : ''"
    class="m-picker">
  </date-picker>
</template>

<script>
import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'
import 'vue2-datepicker/locale/zh-cn'
export default {
  props: {
    size: {
      type: String,
      default: 'normal'
    }
  },
  components: {
    DatePicker
  },
  methods: {
    onInput (val) {
      this.$emit('input', val)
    },
    onChange (e) {
      this.$emit('change', e)
    },
    onOpen () {
      this.$emit('open')
    }
  }
}
</script>
<style lang="less">
.m-picker{
  width: 100%;
  .mx-input{
    height: 32px;
    padding: 4px 11px;
    border-radius: 2px;
    border: 1px solid #d9d9d9;
    box-shadow: none;
    transition: border-color 0.3s;
    .mx-icon-calendar{
      font-size: 14px;
    }
    &:hover{
      border-color: #f5222d;
    }
    &:focus{
      border-color: #f5222d;
      box-shadow: 0 0 0 2px rgba(245, 34, 45, 0.2);
    }
    &::placeholder{
      color: #BFBFBF;
    }
  }
}
.small-picker{
  .mx-input{
    height: 24px;
    padding: 0 7px;
  }
}
.has-error .mx-input{
  border-color: #f5222d;
}
</style>

父组件通过 v-bind=“$attrs” 将除了props和自定义事件以外的其他属性传入子组件。

子组件通过@input="$emit(‘input’, $event)"改变父组件的v-model值。

父组件：

<MdatePicker
   v-model="date"
   :default-value="initDate"
   @change="changeDate"
   :disabled-date="disabledDate"
   placeholder="请选择日期"
   valueType="format"
   style="width: 120px;"
   size="small"
   :clearable="false" />

---

<input v-model="name">
相当于
<input v-bind:value="name" v-on:input="name= $event.target.value">

<MyInput v-model="name" />
相当于
<MyInput v-bind:value="name" v-on:input="name = argument[0]" />

通过input监听事件，name接收回调函数的第一个参数。
在自定义组件中，实现数据绑定，需要emit去触发input的事件，this.$emit(‘input’, val)。