VueJS：子组件未从父组件获取道具数据

Question

注意：这不是重复的问题，因为这里的答案都无法解决我的问题。

子组件：

<template>
  <div>
    <v-card>
      <v-card-text>
        <p> Activity for Financial Year {{ this.currentFinancialYear.string_date }}
        </p>
      </v-card-text>
      <div class="px-3 pt-5">
        <v-select
          label="Financial Year"
          v-model="currentFinancialYear"
          :items="years"
          item-text="string_date"
          :return-object="true"
        ></v-select>
      </div>
    </v-card>
  </div>
</template>

<script>

export default {
  name: 'HeatMap',
  props: {
    years: {
      type: Array
    },
    financialYear: {
      type: Object
    },
    cardWidth: {
      type: String,
      default: '860px'
    }
  },
  data() {
    return {
     currentFinancialYear: {}
    }
  },
  watch: {
    currentFinancialYear (newVal, oldVal) {
      if (newVal) {
        this.getData()
        return newVal
      }
      return oldVal 
    },
    financialYear (newVal, oldVal){
      this.currentFinancialYear = newVal
    },
    years (newVal) {
      return newVal
    }
  },
  methods: {
    getData() {
      // Some axios code
    }
  }
</script>

父组件：

<template>
  <div>
    <v-layout class="headline pt-5" align-center> <p>Pulse</p> </v-layout>
    <HeatMap
        :years='years'
        :financialYear='finacialYear'
        :cardWidth="'860px'"
    />
  </div>
</template>

<script>
import HeatMap from '@/components/charts/HeatMap'
import { getYears } from '@/services/MetricsService'

export default {
  name: 'MetricsDisplay',
  components: {
    HeatMap
  },
  data () {
    return {
        years: [],
        finacialYear: {}
    }
  },
  created () {
    getYears().then(response => {
      for (var i = 0 ; i < response.data.data.items.length - 1 ; i++) {
        this.years[i] = {
          start: new Date(response.data.data.items[i], 3, 1).toISOString(),
          end: new Date(response.data.data.items[i] + 1, 2, 31).toISOString(),
          string_date: response.data.data.items[i] + ' - ' + (response.data.data.items[i] + 1)
        }
      }
      this.financialYear = this.years[this.years.length - 1]
    })
  }
}
</script>

因此，如您所见，parent 将数组years 和对象financialYear 作为道具发送给孩子。我已经在子组件中的那些道具上放置了一个监视，以便在数据到来时更新数据。但由于某种原因，currentFinancialYear 以 undefined 的形式出现。

此外，您可以在 child 中看到，v-select 使用 years 数组来填充其内容。第一次加载组件时，v-select 中没有元素，这表明years 也是空的。由于currentFinancialYear负责v-select的item的选择，所以也没有选择item。

只是为了显示数据的样子：

1. years：

[
   {
      end: "2018-03-31T18:30:00.000Z"
      start: "2017-03-31T18:30:00.000Z"
      string_date: "2017 - 2018"
   },
   {
      end: "2019-03-31T18:30:00.000Z"
      start: "2020-03-31T18:30:00.000Z"
      string_date: "2017 - 2018"
   }
]

1. currentFinancialYear：

[
   {
      end: "2018-03-31T18:30:00.000Z"
      start: "2017-03-31T18:30:00.000Z"
      string_date: "2017 - 2018"
   }
]

我知道父子生命周期是这样的：

1. 父级的created()
2. created() of child
3. mounted() 的孩子
4. mounted() 的父级。

我已阅读 Vue.js 指南，他们告诉我们将 prop 变量置于监视之下，这就是我这样做的原因。

如果我在created() 中写一个console.log(this.years)，那么年份正在被打印出来。即便如此，我也无法初始化currentFInancialYear 以获取我的v-select 中的年份。

我也尝试在mounted() 和created() 中初始化currentFinancialYear，但没有成功。

我需要的解决方案是：

在第一次加载组件时，child、years、financialYear、currentFinancialYear 的数据值应该具有从父级传递的值，这样我的v-select 有元素。

有人可以解释一下如何准确计时父子道具数据传递吗？

Answer 1

我认为您遇到的问题是一个相当语义的问题，与数组或对象实际上是什么以及您如何观察它有关。

显然我们可以将一个对象（或数组）定义为const something = {}，并且可以这样做，因为常量是真正的常量并且是一个对象容器，它不会改变，但是容器的内容可以改变。

这就是问题所在，因为您设置的是观察对象或数组容器而不是其内容。幸运的是，vue 用一些更晦涩的功能覆盖了我们。您需要在手表中使用“立即”和“处理程序”，如下所示：

watch: {
  currentFinancialYear: {
      handler: function (val, oldVal) {
        if (newVal) {
          this.getData()
          return newVal
        }
        return oldVal 
      },
      immediate: true
    },
}

您可以在docs 中查看有关它的所有信息，或者在here 有一篇涵盖它的博客文章。