javascript - VueJS : Child component not getting prop data from parent

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>

因此，如您所见，父级将数组 years 和对象 financialYear 作为 props 发送给子级。我在子组件中的这些 Prop 上放置了一个监视，以便在数据出现时更新数据。但由于某种原因，currentFinancialYear 为未定义。

此外，正如您在 child 中看到的，v-select 使用 years 数组来填充其内容。第一次加载组件时，v-select 中没有任何元素，这表明 years 也是空的。由于 currentFinancialYear 负责选择 v-select 的项目，因此也不会选择任何项目。

只是为了展示数据的样子:

1. 年:

[
   {
      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"
   }
]

当前财务年度:

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

我知道父子生命周期如下所示:

1. 父级的created()
2. child 的created()
3. 子组件的 mount()
4. 父级的 mount()。

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

如果我在 created() 中写入 console.log(this.years)，则会打印年份。即便如此，我无法初始化 currentFINancialYear 来获取 v-select 中的年份。

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

我需要的解决方案是:

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

Can someone please explain how to exactly time parent-child prop data passing?

Answer 1

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

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

这就是问题所在，因为您正在设置监视对象或数组容器而不是其内容。幸运的是，vue 为我们提供了一些更晦涩难懂的功能。您需要在 watch 中使用“立即”和“处理程序”，如下所示:

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

您可以在 docs 中查看所有相关信息。或者有一篇博客文章介绍了它 here .