vue3二次封装组件el-form

<template>
  <div>
    <slot name="header"></slot>
    <el-form ref="ruleFormRef" :model="modelvalue" :label-width="labelWidth" class="demo-ruleForm">
      <template v-for="(item, index) in formItems" :key="index">
        <el-form-item :label="item.label" :prop="item.prop">
          <template v-if="item.type === 'input'">
            <el-input v-model="modelvalue[item.prop]" :type="item.type" />
          </template>
          <template v-else>
            <el-select v-model="modelvalue[item.prop]">
              <el-option :label="option.label" :value="option.value" v-for="(option, i) in item.options" :key="i" />
            </el-select>
          </template>
        </el-form-item>
      </template>


    </el-form>
    <slot name="footer"></slot>
  </div>

</template>

<script setup lang="ts">
const props = defineProps({
  labelWidth: {
    type: String,
    default: '120px'
  },
  formItems: {
    type: Array
  },
  modelvalue: {
    type: Object
  }
})
import {ref} from 'vue'
let ruleFormRef = ref()
const resetForm = () => {
  ruleFormRef.value.resetFields()
}
defineExpose({
  resetForm
})
</script>

<style lang="scss" scoped></style>

 myForm组件，用于封装form表单 ， 通过配置项的方式生成表单 ， 无需过多的写html结构

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <MyForm v-bind="configForm" v-model:modelvalue="formdata" ref="myform">
      <template #header>
        <h2>title</h2>
      </template>
      <template #footer>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            Create
          </el-button>
          <el-button @click="resetForm()">Reset</el-button>
        </el-form-item>
      </template>
    </MyForm>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MyForm from '@/components/myForm.vue';
let configForm = {
  labelWidth: '120px',
  formItems: [
    {
      label: 'name',
      type: 'input',
      prop: 'name',

    },
    {
      label: 'region',
      type: 'select',
      prop: 'region',
      options: [
        {
          label: 'one',
          value: 'shanghai',
        },
        {
          label: 'two',
          value: 'beijing',
        }
      ]

    }
  ]
}
const form = {}
configForm.formItems.map(item => {
  form[item.prop] = ''
})
const formdata = ref(form);
let myform = ref()
let resetForm = () => {
  myform.value.resetForm()
}
let submitForm = ()=> {
  console.log(formdata.value);
  
}
</script>

引用myform组件的页面 ， 写config配置表单 ， 并通过v-bind传给组件

v-bind传值 ， 相当于传的是解构的值

里边还用了具名插槽

子组件定义了重置表单的方法 ，并且需要defineExpose暴露方法，父组件才可使用