封装组件方法

封装的目的是隐藏对象的内部状态和实现细节，只暴露必要的接口给外部使用者

封装动态表单：

1.通过双向绑定实现数据的互通（下拉选择框和我的页面数据进行双向绑定）

在父组件导入子组件并且使用子组件把父组件data数据绑定在子组件的v-model上

<JSelectOptions v-model="value" :options="options" />

在子组件通过props接收父组件传来的value数据，并且在子组件的data数据里面通过赋值操作把父组件的value赋值给子组件的cValue，然后把cValue绑定在子组件的v-model上

在子组件自定义一个model，传入父组件值为参数，和一个事件change函数

当我们在下拉选择框选择一个数据的时候会触发onChange函数，把你所选的值赋值给cValue，然后再通过change函数把子组件的选择的数据传回到父组件里面也就是表单里面

<template>
  <el-select v-model="cValue" placeholder="请选择" clearable @change="onChange">
    <el-option
      v-for="(item,index) in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>

</template>
<script>

export default {
  name: 'JSelectOptions',
  model: {                     //自定义model传给prop参数父组件的值
    prop: 'value',
    event: 'change'               //传入一个change事件
  },
  props: {
    value: {
      type: String,
      required: false
    },
    options: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {
      cValue: this.value || ''

    }
  },
  methods: {
    onChange(v) {                         // 在选择下拉选择的时候执行事件函数把选择数据赋值
    this.cValue = v                                  给子组件绑定的数据再通过emit传到父组件
      this.$emit('change', this.cValue)
    }

  }

}
</script>

2，封装动态表单

思路：在对话框里，把表单拿出来进行动态封装，即可以在父组件可以自定义字段，封装也是把重复的字段或者属性通过v-if进行循环，不需要写很多属性字段

封装表单我们可以想到可以循环表单字段组件，实现页面渲染的效果，然后通过在data数据配置里面配置字段属性实现字段的配置

//<component>这个组件时用于渲染动态组件的原组件，实际要渲染的是is属性

需要动态渲染表单的话重点就是配置表单的组件，我们需要判断是否有配置数据传进来，如果有我们则循环出表单的数据

<template>
  <el-form ref="dynamicForm" :model="formModel" :rules="rules">
    <template v-if="schemas.length !== 0">                //判断是否有配置字段
      <template v-for="(schema, index) in schemas">        //循环配置字段
        <el-form-item

          v-if="shouldShow(schema)"          
          :key="index"
          :label="schema.label"
          :prop="schema.field"
          :required="isRequired(schema)"
          :label-width="schema.labelWidth"
          v-bind="schema.itemProps"
        >
          <component                                         //渲染动态组件
            :is="getComponent(schema.component)"                //is绑定组件
            v-model="formModel[schema.field]"                //绑定表单数据
            v-bind="getComponentProps(schema)"
            attrs
          />
          <template v-if="schema.helpMessage">
            <el-tooltip effect="dark" :content="schema.helpMessage" placement="top">
              <i class="el-icon-question" />
            </el-tooltip>
          </template>
        </el-form-item>
      </template>
    </template>

    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button @click="handleReset">重置</el-button>
    </el-form-item>

  </el-form>
</template>