如何在Vue中验证来自父组件的子窗体

Question

我有一个子组件，它包括表单：

<el-form :model="abc" ref="ruleForm" :rules="rules">
<el-form-item prop="files">
<abc-card :title="getTranslation('abc.files')">
<file-selector v-model="abc.files" />
</abc-card>
</el-form-item>
</el-form>

我想在这个表单中添加一些简单的验证：

rules: function () {
return {
files: [
{
type: 'object',
required: true,
trigger: 'change',
message: 'Field required',
},
],
};
},

但我的点击按钮在父组件中：

<files v-model="editableAbc" ref="editableTab" />
<el-button type="primary" @click="submitForm()">Create</el-button>
methods: {
submitForm() {
this.$refs.form.validate((isValid) => {
if (!isValid) {
return;
}
////API CALLS////
});
},
}

因此，我试图实现当点击按钮时，导航应该被渲染。我该怎么做？

Answer 1

根据您的要求，我的建议是在子组件上使用ref来访问其方法，然后在提交时单击父组件，触发子组件方法。

在父组件模板中：

<parent-component>                                                                                                                                                        
<child-component ref="childComponentRef" />
<button @click="submitFromParent">Submit</button>                                                                      
</parent-component>

在父组件脚本中：

methods: {
submitFromParent() {
this.$refs.childComponentRef.submitForm();
}
}

在子组件脚本中：

methods: {
submitForm() {
// Perform validations and do make API calls based on validation passed.
// If you want to pass success or failure in parent then you can do that by using $emit from here.
}
}

Answer 2

；文件"；组件是你所说的形式吗？如果是这样，那么ref应该在调用"files"组件时准确放置，而不是放在它内部。这将允许您访问父元素中的组件。

<files v-model="editableAbc" ref="ruleForm" />

上面的评论中提到了道具的方法。我真的不喜欢，但我可以告诉你。您需要在父组件的数据中设置一个值。接下来，您必须将它作为道具传递给子组件。单击按钮时，必须更改此键的值(例如+1(。在子组件中，您需要通过watch监控props值的变化，并调用验证函数。

// Parent
<template>
<div class="test">
<ChildComponent />
</div>
</template>
<script>
export default {
data() {
return {
updateCount: 0,
};
},
methods: {
submitForm() {
// yout submit method
this.updateCount += 1;
},
},
};
</script>
// Child
<script>
export default {
props: {
updateCount: {
type: Number,
default: 0,
},
},
watch: {
updateCount: {
handler() {
this.validate();
},
},
},
methods: {
validate() {
// yout validation method
},
},
};
</script>

还有一个解决方案。如果不能将按钮放置在子组件中，但可以将其穿过插槽，则这是合适的。您需要通过插槽中的道具传递子组件中的validate函数。在这种情况下，在父组件中，您将能够通过v-slot获得此函数，并将其绑定到您的按钮。

// Parent 
<template>
<div class="test">
<ChildComponent>
<template #button="{ validate }">
<button @click="submitForm(validate)">My button</button>
</template>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from "./ChildComponent";
export default {
components: {
ChildComponent,
},
methods: {
submitForm(cb) {
const isValid = cb();
// your submit code
},
},
};
</script>
// Child
<template>
<div class="child-component">
<!-- your form -->
<slot name="button" :validate="validate" />
</div>
</template>
<script>
export default {
methods: {
validate() {
// yout validation method
console.log("validate");
},
},
};
</script>