vue清空子组件数据或强制刷新子组件

需求：每次点开子页面的时候，里面的表单内容都为空this.$refs[‘form’].resetFields()1、可以通过ref把表单数据绑定上在data中定义form写入对应key和value(每个input输入的值)在点击按钮打开子组件的时候是触发这个语句，这样每次打开表单数据都是空的，当然如果想表单输入一半关掉但不希望表单内容清空就不能用上面那句话的写法了，只需要在表单提交成功之后写入这句

ghl-Dragon

5711人浏览 · 2021-02-22 19:01:40

ghl-Dragon · 2021-02-22 19:01:40 发布

需求：每次点开子页面的时候，里面的表单内容都为空

this.$refs[‘form’].resetFields()

1、可以通过ref把表单数据绑定上

在这里插入图片描述
在data中定义form写入对应key和value(每个input输入的值)

在点击按钮打开子组件的时候是触发这个语句，这样每次打开表单数据都是空的，
当然如果想表单输入一半关掉但不希望表单内容清空就不能用上面那句话的写法了，只需要在表单提交成功之后写入这句话就好了

2、可以给定一个v-if 通过其特性来强制刷新页面

在这里插入图片描述
这个是引入的子组件和写在同一个文件里的差不多，在父元素上写v-if 在data中写入showCard=false，这样在点击展开子组件按钮的方法里只需要写入this.$nextTick(() => (this.showSetUp = true)) 即可，每次打开页面都会强制刷新

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^