如何从 vue.js 2.0 中的组件获取属性值？

Question

I have this component:

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

I import this component like so:

import picker from '../components/DateFilter'

In this vue I have a button that when clicked i want it to get a property from the component that I am importing:

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

the method has an alert to show me the value:

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

error message:

Cannot read property 'value' of undefined

other attempts:

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

I am new to vue and I havent been able to figure out where I am doing this wrong.

Answer 1

It is techincally possible to access child properties by using this.$children (or this.$parent ) but please dont! It will introduce coupling between your components which is bad, very bad.

Instead you should use props to pass data down to your children, and emit events up to your parents.

If this is the vue-datepicker you are using, here's one example to do what you want:

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

And in parent:

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

You can read more about this on the links above, or on this article which summarize this and more.

Answer 2

picker is a component class, not an instance of a component. It doesn't have any properties you can access. Similarly, Datepicker (not datepicker , which is just the HTML tag form) is a component, not an instance.

You're thinking about Vue data backwards. You provide initial values to your datepickers, but you don't have them storing new values anywhere. You expect to be able to "look into" children to get values, but instead, you should be sending those values out of the children via events (read this).