Question

我有3个vue.js嵌套组件：main，parent，child。

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

如果我将父脚本设置为静态数据（IE截止日期为'2019-12-12'），则子级将显示小部件运行良好，但是如果我使用动态数据，则会生成错误。

我正在使用 computing 将数据传递给子组件，如果使用警报调试它，则会看到2条警报： undefined ，然后是正确的日期。< / p>

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

父模板：

<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

在挂载的生命周期挂钩触发之前，您的父组件将deadline传递到其子组件。您的子组件将其deadline设置为初始值undefined。

您应将deadline设为子组件中的计算属性：

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

然后您可以在孩子中使用internalDeadline。

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

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

Vue.js子组件未更新

1 个答案: