//InputComponent.vue ?要渲染的子組件
<template>
? <el-input :value="username" @input="inputHandler"></el-input>
</template>

<script>
? export default {
? ? name: 'InputComponent',
? ? data() {
? ? ? return {

? ? ? }
? ? },
? ? model: {
? ? ? prop: 'username',
? ? ? event: 'input'
? ? },
? ? props: {
? ? ? username: String
? ? },
? ? methods: {
? ? ? inputHandler(ev) {
? ? ? ? console.log(ev)
? ? ? ? this.$emit('input', ev)
? ? ? }
? ? }
? }
</script>

<style scoped>

</style>

//SwitchComponent.vue ?要渲染的子組件
<template>
? <el-switch
? ? :value="checked"
? ? active-color="#13ce66"
? ? inactive-color="#ff4949"
? ? @change="changeHandler"
? >
? </el-switch>
</template>

<script>
? export default {
? ? name: 'SwitchComponent',
? ? data() {
? ? ? return {

? ? ? }
? ? },
? ? model: {
? ? ? prop: 'checked',
? ? ? event: 'change'
? ? },
? ? props: {
? ? ? checked: {
? ? ? ? default: true
? ? ? }
? ? },
? ? methods: {
? ? ? changeHandler(ev) {
? ? ? ? this.$emit('change', ev)
? ? ? }
? ? }
? }
</script>

<style scoped>

</style>

//SelectComponent.vue ?要渲染的子組件
<template>
? <el-select :value="role" placeholder="請選擇" @change="changeHandler">
? ? <el-option
? ? ? v-for="item in options"
? ? ? :key="item.value"
? ? ? :label="item.label"
? ? ? :value="item.label">
? ? </el-option>
? </el-select>
</template>

<script>
? export default {
? ? name: 'SelectComponent',
? ? data () {
? ? ? return {
? ? ? ? options: [
? ? ? ? ? {
? ? ? ? ? ? value: '1',
? ? ? ? ? ? label: '李世民'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '2',
? ? ? ? ? ? label: '嬴政'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '3',
? ? ? ? ? ? label: '劉邦'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '4',
? ? ? ? ? ? label: '項羽'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? value: '5',
? ? ? ? ? ? label: '范蠡'
? ? ? ? ? }
? ? ? ? ],
? ? ? ? value: ''
? ? ? }
? ? },
? ? model: {
? ? ? prop: 'role',
? ? ? event: 'change'
? ? },
? ? props: {
? ? ? role: {
? ? ? ? default: ''
? ? ? }
? ? },
? ? methods: {
? ? ? changeHandler(ev) {
? ? ? ? this.$emit('change', ev)
? ? ? }
? ? }
? }
</script>

<style scoped>

</style>

//Main.vue ?父組件
<template>
? <div>
? ? ? <el-form :model="formData">
? ? ? ? <el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.label">
? ? ? ? ? <component
? ? ? ? ? ? :is="item.type"
? ? ? ? ? ? v-model="formData[item.key]"
? ? ? ? ? >
? ? ? ? ? </component>
? ? ? ? </el-form-item>
? ? ? </el-form>
? </div>
</template>

<script>
//引入三個表單組件
? import InputComponent from './subComponents/InputComponent'
? import SelectComponent from './subComponents/SelectComponent'
? import SwitchComponent from './subComponents/SwitchComponent'

? export default {
? ? name: 'Main',
? ? data() {
? ? ? return {
? ? ? ? //數(shù)據(jù)的type值要與組件的名字對應 ?
? ? ? ? formItemList: [
? ? ? ? ? { type: 'switch-component', require: true, label: '開關', key: 'isOpen' },
? ? ? ? ? { type: 'input-component', require: true, label: '姓名', key: 'name' },
? ? ? ? ? { type: 'select-component', require: true, label: '角色', key: 'role' },
? ? ? ? ],
? ? ? ? formData: {

? ? ? ? }
? ? ? }
? ? },
? ? components: {
? ? ? InputComponent,
? ? ? SwitchComponent,
? ? ? SelectComponent,
? ? },
? ? methods: {

? ? }
? }
</script>

<style scoped lang="less">
??
</style>