vue element-ui 表单验证第一次表单验证的结果，在第二次表单验证时仍然存在

acoolgiser

发布于 2020-05-16 13:34:09

2K0

发布于 2020-05-16 13:34:09

文章被收录于专栏：acoolgiser_zhuanlan

首先我们还是看一下文章：https://blog.csdn.net/weixin_37930716/article/details/90234705 的内容

笔者在参考该文章的时候，踩了一个坑，是vue父子组件通信中使用ref传参的问题！

关键点：

该文章的作者的弹框组件是和父组件写在同一个vue文件里的，也就是没有单独把弹框的页面代码写在另一个vue文件里。这样在父子组件通信的时候其实只有两级通信，如果写在单独的一个vue文件里，实际上就是三级通信。

清除上一次验证结果的代码就应该是：

if (this.$refs.子组件名称.$refs.editForm)

this.$refs.子组件名称.$refs.editForm.resetFields();

完整的案例展示：

代码1：对话框和父组件的页面代码是在同一个vue文件里

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>

    <el-dialog
      title="测试对话框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="refdata"
          ><el-form-item
            label="测试输入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能为空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

此时只有两级通信，在【添加】按钮点击事件中添加如下代码即可：

handleAddDialogOpen() {
      if (this.$refs.refdata) {
          this.$refs.refdata.clearValidate();
      }
      this.visible = true;
},

代码2：对话框是单独的一个vue文件，和父组件不是在同一个vue文件里

【添加】按钮所在的父组件的代码（简单示意）

<template>
  <basic-container>
    <el-row>
      <el-col :span="22"></el-col
      ><el-col :span="2"
        ><el-button type="primary" round @click="handleAddDialogOpen"
          >添加</el-button
        ></el-col
      >
    </el-row>
    <testDialog ref="testDlg"> </testDialog>
  </basic-container>
</template>

<script>
import testDialog from "./testDialog";

export default {
  components: { testDialog }

  data() {
    return {
       ... //此处省略
    }
  },
  methods: {
    handleAddDialogOpen(row) {
      ...//此处省略

    }
  }

}
</script>

testDialog 对话框子组件的另一个vue文件的代码：（注意ref参数）

<template>
  <basic-container>
    <el-dialog
      title="测试对话框"
      top="200px"
      width="40%"
      :fullscreen="false"
      :visible.sync="visible"
      :close-on-click-modal="true"
    >
      <el-row
        ><el-form :model="test" ref="testForm"
          ><el-form-item
            label="测试输入框"
            prop="testinput"
            :rules="[{ required: true, message: '不能为空' }]"
            ><el-input v-model="test.testinput"></el-input></el-form-item
        ></el-form>
      </el-row>
    </el-dialog>
    
  </basic-container>
</template>

此时，是三级组件的通信，注意看ref参数的定义。也就是说，对于【添加】按钮所在的父组件来说，testDlg是它的儿子，testForm是它的孙子。

如果要实现testForm里面的输入框的表单验证条件结果的清除，【添加】按钮的事件中的代码应该这样写：

handleAddDialogOpen() {
      if (this.$refs.testDlg.$refs.testForm) {
          this.$refs.testDlg.$refs.testForm.clearValidate();
      }
      this.visible = true;
},

笔者正是犯了这个错误，没有意识到是三级通信，还是按照那篇博客那样的写法，导致清除不掉。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/05/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度