vue + element UI 表单中内嵌自定义组件的表单校验触发方案

需求描述

在表单中，可能部分表单项需封装成自定义组件，如何在表单提交时，能同步触发自定义组件的表单校验？

解决方案

将表单绑定的变量传入自定义组件中，在自定义组件中定义表单校验规则

完整代码范例

表单

内嵌自定义组件
src\test\index.vue

<template>
  <div style="padding: 30px; width: 300px">
    <el-form ref="formRef" :model="searchData" label-width="80px" size="mini">
      <el-form-item
        label="姓名"
        prop="name"
        :rules="{ required: true, message: '不能为空' }"
      >
        <el-input v-model="searchData.name"></el-input>
      </el-form-item>

      <SearchJob :searchData="searchData" />

      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SearchJob from "./search_job.vue";
export default {
  components: {
    SearchJob,
  },
  data() {
    return {
      searchData: {},
    };
  },
  mounted() {},
  methods: {
    search() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert("通过表单校验，开始搜索！");
        }
      });
    },
    reset() {
      this.searchData = {};
    },
  },
};
</script>

内嵌组件

src\test\search_job.vue

<template>
  <el-form-item
    label="工作"
    prop="job"
    :rules="{ required: true, message: '不能为空' }"
  >
    <el-input v-model="searchData.job"></el-input>
  </el-form-item>
</template>

<script>
export default {
  props: {
    searchData: Object,
  },
};
</script>