javascript - 如何从 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> 

我像这样导入这个组件:

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

错误信息:

Cannot read property 'value' of undefined

其他尝试:

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

我是 vue 的新手，我一直无法弄清楚我在哪里做错了。

Answer 1

使用 this.$children(或 this.$parent)在技术上是可以访问子属性的，但是请不要这样做!将在您的组件之间引入耦合，这很糟糕，非常糟糕。

相反，您应该使用 props将数据传递给您的 child ，以及emit由你 parent 决定的事件。

如果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 上阅读更多相关信息总结了这一点以及更多内容。