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

错误消息：

无法阅读财产＆＃39;价值＆＃39;未定义的

其他尝试：

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

我是vue的新手，我无法弄清楚我在做错了什么。

Answer 1

使用this.$children（或this.$parent）来访问子属性是技术上的，但请不要！它会引入组件之间的耦合，这很糟糕，非常糟糕

相反，您应该使用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将这些价值发送给子女（请阅读此内容）。

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

2 个答案: