如何从 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)
}

错误信息：

无法读取未定义的属性“值”

其他尝试：

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

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

Answer 1

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

相反，您应该使用props将数据传递给您的孩子， emit事件发送给您的父母。

如果这是您正在使用的 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> 

您可以在上面的链接或总结此内容的本文中阅读更多相关信息。

Answer 2

picker是一个组件类，而不是组件的实例。 它没有您可以访问的任何属性。 同样， Datepicker （不是datepicker ，它只是 HTML 标记表单）是一个组件，而不是一个实例。

您正在向后考虑 Vue 数据。 您为日期选择器提供初始值，但您没有让它们在任何地方存储新值。 您希望能够“查看”子级以获取值，但相反，您应该通过事件将这些值从子级发送出去（阅读此内容）。