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发送给孩子。我在子组件中的那些道具上放置了一块手表，以便随时更新数据。但是出于某种原因，currentFinancialYear的名称是 undefined 。

此外，正如您在子中看到的那样，v-select使用years数组填充其内容。第一次加载组件时，v-select中没有任何元素指示years也为空。由于currentFinancialYear负责选择v-select的项目，因此也没有选择任何项目。

仅显示数据的样子：

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

currentFinancialYear：

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

我知道亲子生命周期如下所示的事实：

父级的created（）
孩子的created（）
孩子的壁挂（）
父级的壁挂（）。

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

如果我在console.log(this.years)中写一个created()，则会打印出年。即使这样，我也无法初始化currentFInancialYear中的年份的v-select。

我也曾尝试在currentFinancialYear和mounted()中初始化created()，但是没有运气。

我需要的解决方案是：

在第一次加载组件时，子，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上找到一篇博客文章。

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

1 个答案: