vue动态组件component

效果图
父组件

<script setup lang="ts">
import { ref } from "vue";

const ruleForm = ref({
  isOpen: "开",
  name: "1",
  form: {
    isOpen: "开",
    name: "1",
  },
});
const formItemList = ref([
  {
    type: "GoodWillRadio",
    require: true,
    key: "isOpen",
    option: {
      label: "列一",
      eleList: [{ label: "开" }, { label: "关" }],
      span: 8,
    },
  },
  {
    type: "GoodWillRadio",
    require: true,
    key: "name",
    option: {
      label: "列二",
      span: 8,
      eleList: [{ label: "开" }, { label: "关" }],
    },
  },
  {
    type: "GoodWillRadio",
    require: true,
    key: "name",
    option: {
      label: "列三",
      span: 8,
      eleList: [{ label: "开" }, { label: "关" }],
    },
  },
  {
    type: "GoodWillInput",
    require: true,
    key: "name",
    option: { label: "列四", span: 8 },
  },
  {
    type: "GoodWillInput",
    require: true,
    key: "name",
    option: { label: "列五", span: 8 },
  },
  {
    type: "GoodWillCustomForm",
    require: true,
    key: "form",
    option: {
      label: "列六",
      span: 24,
      eleList: [
        {
          type: "GoodWillRadio",
          require: true,
          key: "name",
          option: {
            label: "列一",
            eleList: [{ label: "开" }, { label: "关" }],
            span: 8,
          },
        },
        {
          type: "GoodWillRadio",
          require: true,
          key: "isOpen",
          option: {
            label: "列一",
            eleList: [{ label: "开" }, { label: "关" }],
            span: 8,
          },
        },
        {
          type: "GoodWillRadio",
          require: true,
          key: "isOpen",
          option: {
            label: "测试",
            eleList: [{ label: "开" }, { label: "关" }],
            span: 12,
          },
        },
      ],
    },
  },
]);
const aaa = () => {
  console.log(ruleForm.value);
};
</script>
<script lang="ts">
import GoodWillRadio from "@/components/GWUI/GWRadio/GoodWillRadio.vue";
import GoodWillInput from "@/components/GWUI/GWInput/GoodWillInput.vue";
import GoodWillCustomForm from "@/components/GWUI/GWCustomForm/GoodWillCustomForm.vue";
export default {
  components: {
    GoodWillRadio,
    GoodWillInput,
    GoodWillCustomForm,
  },
};
</script>
<template>
  <el-form
    style="border: 1px solid black"
    ref="ruleFormRef"
    :model="ruleForm"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
  >
    <el-row :span="24">
      <component
        v-for="(item, index) in formItemList"
        :key="index"
        v-model:elevalue="ruleForm[item.key]"
        :is="item.type"
        :option="item.option"
      ></component>
    </el-row>
  </el-form>
  <el-button @click="aaa()"> aa</el-button>
</template>

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

子组件-GoodWillInput

<script setup lang="ts">
import { ref, watchEffect } from "vue";

const elevalue = ref();
import { defineEmits, defineProps } from "vue";
const props = defineProps({
  elevalue: String,
  option: Object,
});
const emit = defineEmits(["update:elevalue"]);
watchEffect(() => {
  elevalue.value = props.elevalue;
});
watchEffect(() => {
  emit("update:elevalue", elevalue.value);
});
</script>
<template>
  <el-col :span="option.span">
    <el-form-item :label="option.label">
      <el-input v-model="elevalue" style="width: 100%" />
    </el-form-item>
  </el-col>
</template>

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

子组件-GoodWillRadio

<script setup lang="ts">
import { ref, watchEffect } from "vue";

const elevalue = ref();
import { defineEmits, defineProps } from "vue";

const props = defineProps({
  elevalue: String,
  option: Object,
});
watchEffect(() => {
  elevalue.value = props.elevalue;
});
const emit = defineEmits(["update:elevalue"]);
watchEffect(() => {
  emit("update:elevalue", elevalue.value);
});
</script>
<template>
  <el-col :span="option.span">
    <el-form-item :label="option.label">
      <el-radio-group v-model="elevalue">
        <el-radio
          v-for="(item, index) in option.eleList"
          :label="item.label"
          :key="index"
          >{{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </el-col>
</template>

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

子组件-GoodWillCustomForm

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { defineEmits, defineProps } from "vue";

const elevalue = ref();

const props = defineProps({
  elevalue: Object,
  option: Object,
});
const emit = defineEmits(["update:elevalue"]);
watchEffect(() => {
  elevalue.value = props.elevalue;
  console.log(props.option);
});
watchEffect(() => {
  emit("update:elevalue", elevalue.value);
});
</script>
<script lang="ts">
import GoodWillRadio from "@/components/GWUI/GWRadio/GoodWillRadio.vue";
import GoodWillInput from "@/components/GWUI/GWInput/GoodWillInput.vue";
import GoodWillCustomForm from "@/components/GWUI/GWCustomForm/GoodWillCustomForm.vue";
export default {
  components: {
    GoodWillRadio,
    GoodWillInput,
    GoodWillCustomForm,
  },
};
</script>
<template>
  <el-col :span="option.span">
    <div style="padding: 20px">
      <el-form
        style="border: 1px solid black"
        ref="ruleFormRef"
        :model="elevalue"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-row :span="24">
          <component
            v-for="(item, index) in option.eleList"
            :key="index"
            v-model:elevalue="elevalue[item.key]"
            :is="item.type"
            :option="item.option"
          ></component>
        </el-row>
      </el-form>
    </div>
  </el-col>
</template>

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