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>