javascript - 如何从 vue.js 组件获取默认值？

Question

我有这个组件:

<template>
    <div>
        <label class="col-form-label">
            <span>From</span>
        </label>
      <DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="config.state.fromDate" :disabled="config.disabledFrom"></DatepickerFrom>
    </div>
</template>

<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
  data() {
    return {
      config: {
        disabledFrom: {
          to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
          from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
        },
        state: {
          fromDate: new Date(
            dUse.getFullYear(),
            dUse.getMonth(),
            dUse.getDate() - 1
          ).toString()
        }
      }
    }
  },

  methods: {
    SetSelectedDateFrom: function(selectedDate) {
      this.$emit('selected', selectedDate)
    }
  },
  components: {
    DatepickerFrom
  }
}
</script> 

注意这部分:

:value="config.state.fromDate"

我加载这个组件:

  <div class="card selector col-md-4 holder">
    <pickerTo v-on:selected="DateSelector2" ></pickerTo>    
  </div>

import pickerTo from '../components/DateFilterTo'

我有一个函数，可以在发生更改时获取所选值:

DateSelector2: function(date) {
  FromDate = date
}

选择新日期后，我将其分配给父级内部的全局变量。

问题:

我在组件中设置了一个默认日期，当我向服务器发出请求时，我希望获得该日期。我不知道如何获取此默认值，因为它不会发生在更改事件中。

我是 vue 新手。

Answer 1

最简单的方法之一是在 mounted 函数触发时发出默认值。

mounted () {
    this.$emit('selected', config.state.fromDate)
}

除此之外，我会将值转变为 prop 并稍微改变它以允许它与 v-model 一起使用，以便使用它选择的任何方法从父级传递默认值得出该值。

编辑:

这是我如何重构它以使用 prop 的方法。

<template>
  <div>
    <label class="col-form-label">
      <span>From</span>
    </label>
    <DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="value" :disabled="config.disabledFrom"></DatepickerFrom>
  </div>
</template>

<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      config: {
        disabledFrom: {
          to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
          from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
        },
        state: {
        }
      }
    }
  },

  methods: {
    SetSelectedDateFrom: function(selectedDate) {
      this.$emit('input', selectedDate)
    }
  },
  components: {
    DatepickerFrom
  }
}
</script> 

现在您可以将组件与 v-model 指令一起使用进行 2 路绑定(bind)

<component v-model="dateFrom"></component>

...

data () {
  return {
    dateFrom: new Date(
      dUse.getFullYear(),
      dUse.getMonth(),
      dUse.getDate() - 1
    ).toString()
  }
}