Vue.js 子组件未更新

Question

我有 3 个 vue.js 嵌套组件：主组件、父组件、子组件。

父组件加载基本数据，子组件是一个简单的倒计时小部件，只需要配置一个数据。

如果我用静态数据设置父脚本 (IE deadline='2019-12-12')，子脚本显示小部件工作正常，但如果我使用动态数据，它会产生错误。

我正在使用 computed 将数据传递给子组件，如果我使用警报对其进行调试，我会看到 2 个警报：undefined 然后是正确的日期。

问题是第一个计算数据（未定义）使小部件崩溃，那么如何使用更新（加载）的数据创建子组件？

父模板:

<template>
   <div>
    <flip-countdown :deadline=deadline></flip-countdown>
   </div>
</template>

父脚本：需要修复

export default {
    components: {FlipCountdown},

    props: ['event'],

    computed: {

        deadline: function () {
            if (typeof(this.event.date)!="undefined") {
                //alert(this.event.date)
                return this.event.date;
            } else {
                return "2019-05-21 00:00:00";
            }
        },
    },

子模板：有效

<template>
  <div>
      <flip-countdown :deadline="deadline"></flip-countdown>
  </div>
</template>

Answer 1

您的 parent 组件在挂载的生命周期挂钩触发之前将 deadline 传递给它的 child 组件。您的 child 组件将其 deadline 设置为未定义的初始值。

您应该在 child 组件中使 deadline 成为计算的属性：

computed: {
  internalDeadline() {
    return this.deadline; // comming from props
  }
}

然后你可以在child中使用internalDeadline。

或者，您可以等待渲染 child 组件，直到 deadline 被定义：

<flip-countdown v-if="deadline !== undefined" :deadline="deadline"></flip-countdown>

Vue.js 子组件未更新

Vue.js child component not updated

vue.js