Vue.js 弹窗关闭后如何保持数据传递？

问题描述:

在使用 Vue.js 开发弹窗组件时，常常需要将父组件中的数据传递到弹窗组件内。当弹窗第一次打开时，侦听器会触发，并将父组件中的数据传递到弹窗内的表单元素。然而，如果关闭弹窗后重新打开，之前传递的数据就无法获取到，因为侦听器不再触发。

解决方案:

为了确保弹窗关闭后重新打开时数据依然能够传递，可以在弹窗的关闭方法中手动将父组件中的数据赋值给弹窗内的表单元素。例如，以下代码展示了如何在弹窗关闭时手动赋值：

watch: {
    pid() {
        this.sizeForm.classifyPid = this.pid;
        console.log('222', this.sizeForm.classifyPid);
    },
},

closeDialog() {
    // 其他关闭弹窗的逻辑
    this.sizeForm.classifyPid = this.pid;
}

在弹窗关闭方法 closeDialog() 中，我们将 this.pid 手动赋值给 this.sizeForm.classifyPid，这样即使侦听器没有触发，this.sizeForm.classifyPid 依然能够获得正确的 pid 值。

总结:

通过在弹窗关闭方法中手动赋值，我们可以确保在弹窗关闭后重新打开时，弹窗内的表单元素依然能够获取到正确的数据。这种方法可以有效解决数据传递的问题，并提高代码的可读性和可维护性。