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

【问题标题】：How to get property value from component in vue.js 2.0?如何从 vue.js 2.0 中的组件获取属性值？
【发布时间】：2018-05-06 06:44:34
【问题描述】：

我有这个组件：

<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 的新手，我无法弄清楚我在哪里做错了。

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案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 上阅读有关此内容的更多信息，其中总结了这一点以及更多内容。

【讨论】：

谢谢！为我工作。

【解决方案2】：

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

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

【讨论】：