vue自定义组件数据绑定

vue自定义组件数据绑定

1. v-model指令
   v-model其实是一个语法糖，相当于v-bind和v-on的组合。
   例如：

<input v-bind="val" v-on:input="val=$event.target.value" />

其中val是一个变量，当输入数据的时候，会触发input上的事件去修改val的值。

2. 自定义组件实例

<template>
  <div class="data-time-range">
     <el-date-picker v-model="searchTime" type="datetimerange"
    value-format="yyyy-MM-dd hh:mm:ss"
    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
    size="mini"
    align="right">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'dataTimeRange',
  created () {
  },
  data () {
    return {
      searchTime: []
    }
  },
  props: {
    chooseDateTime: {
      type: Array,
      default () {
        return []
      }
    }
  },
  model: {
    prop: 'chooseDateTime',
    event: 'changeTime'
  },
  watch: {
    searchTime: {
      handler (val) {
        this.$emit('changeTime', val)
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

其中的关键就是

 model: {
    prop: 'chooseDateTime',
    event: 'changeTime'
  }

chooseDateTime为数据，changeTime为事件。

3. 使用自定义组件

<data-time-range v-model="chooseDateTime">
</data-time-range>