vue3父组件调用子组件的form校验
时间: 2023-09-19 14:07:39 浏览: 53
在Vue 3中,可以使用`$refs`来引用子组件,并且调用子组件的方法进行校验。下面是一个示例:
在父组件中,首先给子组件添加一个`ref`属性:
```html
<template>
<div>
<ChildComponent ref="childRef"></ChildComponent>
<button @click="validateForm">校验表单</button>
</div>
</template>
```
然后,在父组件的方法中使用`$refs`引用子组件,并调用子组件的校验方法:
```javascript
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
validateForm() {
this.$refs.childRef.validateForm();
}
}
}
</script>
```
接下来,在子组件中定义一个校验方法:
```html
<template>
<div>
<input v-model="name" type="text" placeholder="请输入姓名">
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
},
methods: {
validateForm() {
// 进行表单校验逻辑
if (!this.name) {
alert('姓名不能为空');
} else {
alert('校验通过');
}
}
}
}
</script>
```
现在,当点击父组件中的按钮时,会调用子组件的`validateForm`方法进行表单校验。
需要注意的是,使用`$refs`引用子组件时,需要保证子组件已经被渲染到页面上才能有效。