vue.js 2.0의 구성 요소에서 속성 값을 가져오는 방법

vue.js 2.0의 구성 요소에서 속성 값을 가져오는 방법

다음 구성 요소가 있음:

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

이 구성 요소를 다음과 같이 가져온다.

import picker from '../components/DateFilter'

이 vue에서 클릭하면 가져올 구성 요소에서 속성을 가져올 수 있는 버튼이 있음:

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

나는 처음 보는 사람인데 내가 어디서 잘못하고 있는지 알 수가 없었다.

기술적으로 다음을 사용하여 하위 속성에 액세스할 수 있다.this.$children(또는)this.$parent)하지만 제발 하지마!그것은 당신의 구성품들 사이에 나쁜, 매우 나쁜 결합을 도입할 것이다.

대신 당신은 당신의 자녀에게 데이터를 전달하고, 당신의 부모에게 사건을 전달하는데 사용해야 한다.

사용 중인 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> 

당신은 위의 링크나 이것과 더 많은 것을 요약한 이 글에서 이것에 대해 더 많이 읽을 수 있다.

picker구성 요소의 인스턴스가 아닌 구성 요소 클래스.그것은 당신이 접근할 수 있는 어떠한 속성도 가지고 있지 않다.마찬가지로Datepicker(아니오)datepicker, HTML 태그 형식)은 인스턴스가 아닌 구성요소 입니다.

당신은 Vue 데이터를 거꾸로 생각하고 있다.당신은 당신의 데이트 상대에게 초기 값을 제공하지만, 당신은 그것들을 어디에 새로운 값을 저장하지 않는다.당신은 가치관을 얻기 위해 아이들을 "조사"할 수 있기를 기대하지만, 대신, 당신은 그 가치들을 행사를 통해 아이들에게서 보내야 한다(이것을 읽는다).

참조URL: https://stackoverflow.com/questions/47436209/how-to-get-property-value-from-component-in-vue-js-2-0