网站 › 『编程语言区』 › Vue重置组件的骚操作

a847404572 发表于 2019-5-30 09:34

Vue重置组件的骚操作

# Vue重置组件


我是在使用Element-ui的dialog组件弹出表单时遇到的，重复打开时会保留上次的数据及验证。



## 方案一

这个方案是我最开始用的，后来找到了更简单的方法

在dialog弹出框关闭事件里利用Vue中的nextTick特性来手动清空表单数据。

## 方案二（推荐）


直接在组件上绑定一个动态的key。

Vue会拿上次的key来做对比，如果一致则继续复用组件，否则重新渲染

`+new Date()`可以获取时间戳





是不是很简单？:tw-1f60f:

原创不易，留下评分 谢谢！
原创不易，留下评分 谢谢！
原创不易，留下评分 谢谢！

https://attach.52pojie.cn/forum/201807/28/125900hlztzbooleprbsyz.png

一笔画情 发表于 2019-6-4 23:17

直接用自带的resetFields()方法不好么？

gamedll 发表于 2019-5-30 10:12

这个不错！

glk1010282338 发表于 2019-5-30 15:03

谢谢分享！！！！

Mo-Maek 发表于 2019-6-2 13:26

close(){
      this.visible = false;
      this.$refs["form1"].resetFields();
    }

熊二不二 发表于 2019-6-4 21:43

666，某些场景下可以使用

mfvpnhaha 发表于 2019-8-1 12:46

楼主是黑马的？

a036601 发表于 2019-8-1 14:35

学习了.这操作不错

hustmba 发表于 2019-8-1 16:14

不错不错，刚好在看VUE

Death—撒旦 发表于 2019-8-6 13:20

666，可还行

查看完整版本: Vue重置组件的骚操作