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

How to get property value from component in vue.js 2.0?

提问by ThunD3eR

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:

在这个 vue 中，我有一个按钮，当点击它时，我希望它从我正在导入的组件中获取一个属性：

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

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

回答by awnton

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.

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

Instead you should use propsto pass data down to your children, and emitevents up to your parents.

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

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

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

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 articlewhich summarize this and more.

您可以在上面的链接或这篇文章中阅读更多关于此内容的内容以及更多内容。

回答by Roy J

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

picker是一个组件类，而不是一个组件的实例。它没有您可以访问的任何属性。类似地，Datepicker(not datepicker，它只是 HTML 标签表单) 是一个组件，而不是一个实例。

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

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