Vue解决父组件清空子组件的表单验证

1.页面上就一个简单的按钮 

 

 

 

2..当点击“显示子组件”按钮时，显示出被隐藏的表单

3.当用户直接点击”登录”按钮时，显示校验的错误信息

 

4.用户直接点击“隐藏”按钮时，表单被隐藏。但存在一个bug，当再次点击“显示子组件”的时候，表单上的错误信息仍然存在。因此需要清空掉子组件的表单错误信息

 

代码如下：

父组件：

<template>
    <div>
      <div>
        <el-button @click="showForm" type="primary" size="">清空子组件里面的form表单的验证</el-button>
      </div>
      <NewForm ref="newForm" v-show="isShow" @hidden="hidden"></NewForm>
    </div>
</template>

<script>
import NewForm from '@/components/NewForm'
export default {
  name: 'HelloTest',
  components: {
    NewForm
  },
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    showForm () {
      this.isShow = true
      this.$refs.newForm.$refs.refForm.clearValidate()
    },
    hidden () {
      this.isShow = false
    }
  }
}
</script>

<style scoped>

</style>

 

子组件：

<template>
  <div style="margin-top: 10px">
    <div style="min-width: 500px;max-width:800px;border: solid 1px #000;margin-left:auto;margin-right: auto">
      <el-form :model="form" :rules="rules" ref="refForm" label-width="80px" style="margin-top: 20px;margin-right: 20px;">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="hidden">隐藏</el-button>
          <el-button @click="doLogin" type="primary">登录</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewForm',
  data () {
    return {
      // 表单的基本属性
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    doLogin () {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          this.$message({message: '登录成功', type: 'success'})
        } else {
          this.$message({message: '登录失败', type: 'error'})
        }
      })
    },
    hidden () {
      this.$emit('hidden')
    }
  }
}
</script>

<style scoped>

</style>

 

1.在子组件上添加ref的属性，然后通过 this.$refs.属性名，获取子组件的DOM的所有元素　以上代码的写法为 this.$refs.newForm

2.获取子组件DOM的节点后，然后在通过$refs获取子组件里面的表单ref属性的DOM节点   最后 代码的写法为 this.$refs.newForm.$refs.refForm。

这样就获取了子组件里面表单的DOM节点，便可以对子组件表单进行操作。如清空表单验证的操作等

 

注：clearValidate()的方法必须在element-ui 2.0以上

转载于:https://www.cnblogs.com/linchen1300/p/10219675.html