コンポーネント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関数が起動するときに、最も簡単な方法の1つがデフォルト値を出力することです。それ以外

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

私は小道具に値を変異し、デフォルト値は、それがその値を導出することを選択した方の方法を使用して親から渡されるように、それはv-modelで作業できるようにするために、わずかにそれを変更するであろう。

EDIT：

は、ここで私は小道具を使用するようにリファクタリングしまう方法です。

<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> 

は今、あなたはこのwihtの小道具を解決しようと

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

... 

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