Vue.js 子组件未更新

Posted 2023-02-23

【中文标题】Vue.js 子组件未更新

【英文标题】：Vue.js child component not updated

【发布时间】：2019-10-05 23:05:42

【问题描述】：

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

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

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

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

问题是第一个计算数据（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>

【问题讨论】：

您的父模板和子模板看起来完全一样，只是您忘记了deadline=deadline 中的双引号（应该是deadline="deadline"）。另外，为了防止deadline 出错时出错，您可以将v-if="deadline" 添加到您的<flip-countdown>

谢谢，指令 v-if="deadline" 这是一个很好的修复。我使用了两个非常相似的组件来在一个地方拥有一个完整的组件。顺便说一句，我会更改名称以避免错误。使用指令 v-if 我将删除所有计算值。感谢您的建议。

【参考方案1】：

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

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

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

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

---

或者，您可以等到定义 deadline 后再渲染子组件：

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

【讨论】：

谢谢！我也有同样的问题将计算值移动到孩子。所以我更喜欢使用 v-if 指令。更少的代码。感谢您的帮助！