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

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以上

以上是 Vue解决父组件清空子组件的表单验证 的全部内容, 来源链接: utcz.com/z/380230.html

回到顶部