如何從 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 數據。 您為日期選擇器提供初始值，但您沒有讓它們在任何地方存儲新值。 您希望能夠“查看”子級以獲取值，但相反，您應該通過事件將這些值從子級發送出去（閱讀此內容）。