为什么没有显示当前时间？

Question

父组件相关代码
html

<el-dialog  v-if="dialogVisible" :title="dialogTitle" :width="`${dialogWidth}px`"  :visible.sync="dialogVisible" :close-on-click-modal="false">
            <component :is="dialogKey" :ref="dialogKey" :currentForm="dialogForm"></component>
            <div slot="footer">
                <el-button @click="handleDialogClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>

js

dialogForm: {
                splitTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
            }

子组件

<el-form :model="currentForm" ref="currentForm" :rules="rules"  label-width="120px">
    <el-form-item label="预约分裂时间" prop="splitTime">
        <el-date-picker
      v-model="currentForm.splitTime"
      type="datetime"
      value-format='yyyy-MM-dd HH:mm:ss'
      format="yyyy-MM-dd HH:mm:ss"
      placeholder="请选择预约分裂时间">
    </el-date-picker>
    </el-form-item>
  </el-form>

复现步骤：

第一次打开弹框： 时间选择器显示的是当前时间
更改时间选择器的时间之后关闭弹框
第二次打开弹框，显示时间是之前弹框里面时间选择的时间，而不是当前时间？

Answer 1

:currentForm="dialogForm"

在父组件传入了dialogForm，在子组件更改了currentForm中的splitTime。也就是你修改了引用值。你下次打开传入的是已经修改了的dialogForm。

介绍两种方案：
1.传入深拷贝的dialogForm；
2.在每次打开弹框时初始化dialogForm；

Answer 2

组件加个key试试

<component :key="dialogKey" :is="dialogKey" :ref="dialogKey" :currentForm="dialogForm"></component>

Answer 3

• 不应该在子组件里面修改prop, 这违反了vue 的单向数据流的原则
• 但是你却修改了, 而在重新重新打开时没有初始化splitTime的值
• 应该在子组件里面注册自定义事件, 父组件监听, 监听到了就修改splitTime
• 或者在prop传入时, 在子组件里监听dialogForm, 对dialogForm做深拷贝
• 最后在父组件的el-dialog关闭或打开前出事初始化splitTime, el-dialog有open与close钩子:
•