vue.js 2.0のコンポーネントからプロパティ値を取得する方法は？

Question

私はこのコンポーネントを持っている：

<template> 
    <div class="animated fadeIn"> 
     <div class="col-sm-6 col-lg-6"> 
     <datepicker class="form-control" :value="config.state.fromDate" :disabled="config.disabledFrom"></datepicker> 
     </div> 
     <div class="col-sm-6 col-lg-6"> 
     <datepicker :value="config.state.toDate" :disabled="config.disabledTo"></datepicker> 
     </div> 
    </div> 
</template> 

<script> 
import Datepicker from 'vuejs-datepicker' 
var d = new Date() 

var year = d.getFullYear() 
var month = d.getMonth() 
var day = d.getDate() 
var fromD = new Date(year - 1, month, day) 
var toDD = new Date(year, month, day) 

console.log(fromD.toString()) 
console.log(toDD) 

export default { 
    data() { 
    return { 
     config: { 
     disabledFrom: { 
      to: fromD 
     }, 
     disabledTo: { 
      from: toDD 
     }, 
     state: { 
      fromDate: (d.getDate() - 1).toString(), 
      toDate: new Date(year, month, day).toString() 
     } 
     } 
    } 
    }, 
    components: { 
    Datepicker 
    } 
} 
</script> 

私はそうのように、このコンポーネントをインポートする：このVUEで

import picker from '../components/DateFilter' 

私がクリックしたときに、私はそれが私のコンポーネントからプロパティを取得したいというボタンがありますインポートしています：

：

<template> 
<div class="animated fadeIn"> 
    <picker></picker> 
</div> 
<div> 
     <button @click="onChange2" class="btn btn-primary">search</button> 
</div> 
</template> 

の方法は私に値を表示するアラートを持っています

エラーメッセージ

onChange2: function() { 
    alert(picker.datepicker.value) 
} 

：

プロパティを読み取ることができません

未定義の他の試みの '価値'：

alert(picker.data.config.state.value) 
    alert(picker.config.state.value) 

私はVUEに新しいですし、私は数字にできていたhavent私はこれを間違ってやっています。

Answer 1

this.$children（またはthis.$parent）を使用して、子プロパティにアクセスするtechincally可能ですが、いけないしてください！これはコンポーネント間のカップリングを引き起こしますが、これは悪い、非常に悪いです。

代わりに、子供にデータを渡すにはpropsを、親にはemitのイベントを渡す必要があります。

thisは、使用しているVUE-DatePickerのであれば、ここであなたが欲しいものを行うための一つの例だ：

// childcomponent.vue 
<template> 
    <div class="child-component"> 
    <datepicker v-on:selected="doSomethingInParentComponentFunction"></datepicker> 
    </div> 
</template> 

<script> 
import Datepicker from 'vuejs-datepicker' 

export default { 
    components: { 
    Datepicker 
    }, 
    methods: { 
    doSomethingInParentComponentFunction (selectedDate) { 
     this.$emit("selected", selectedDate) 
    } 
    } 
} 
</script> 

と親で：

// parentcomponent.vue 
<template> 
    <div class="parent-component"> 
    <child-component v-on:selected="dateSelectedInChild"></child-component> 
    </div> 
</template> 

<script> 
import ChildComponent from 'childcomponent' 

export default { 
    components: { 
    ChildComponent 
    }, 
    methods: { 
    dateSelectedInChild (selectedDate) { 
     console.log(selectedDate) 
    } 
    } 
} 
</script> 

あなたが上でこれについての詳細を読むことができます上記のリンク、またはthis articleに掲載されています。

Answer 2

pickerはコンポーネントクラスであり、コンポーネントのインスタンスではありません。アクセスできるプロパティはありません。同様に、Datepicker（datepickerはHTMLタグフォームではありません）はコンポーネントであり、インスタンスではありません。

あなたはVueデータを後方に考えています。あなたは日付ピッカーに初期値を提供しますが、どこにでも新しい値を保存する必要はありません。あなたは値を取得するために子供を "調べる"ことができると予想しますが、代わりにevents（これを読んでください）経由で子供からそれらの値を送信する必要があります。