Vue动态组件的双向绑定及数据传输,比v-if更优雅

当你在写好了一些与解耦业务的公共组件，想着在动态渲染相关的业务里面使用时是否会不知道如何往下做，而对Vue-Component-is的理解也只停留在组件展示阶段，而业务中很多场景都可以使用component-is实现，类似复杂表单开发、拖拽组件的实现等等，如果你正在使用大量的v-if，那么我建议你看看这篇文章；

先来看看以前v-if的写法

        <!-- //输入框 -->
        <finput v-if="info.component === 'input'" v-model="info.modal" :info="info" />
        <!-- //单选下拉-->
        <SingleSelect v-else-if="info.component === 'single-select'" v-model="info.modal" :info="info" />
        <!-- //单个日期选择-->
        <SingleDate v-else-if="info.component === 'single-date'" v-model="info.modal" :info="info" />
        <!-- //时间范围选择24小时-->
        <timeRange v-else-if="info.component === 'time-range'" v-model="info.modal" :info="info" />
        <!-- //数字输入-->
        <inputNumber v-else-if="info.component === 'input-number'" v-model="info.modal" :info="info" />
        <!-- //单选框-->
        <fradio v-else-if="info.component === 'fradio'" v-model="info.modal" :info="info" />
        <p v-else>未知组件</p>

可以看到，会有很多v-if充斥了大部分code，不过也能实现业务中复杂表单的开发；
再看看配置文件(阉割版)：

export const filterSet = [
    {
        title: '测试',
        code:'test',
        icon: 'el-icon-question',
        style:{backgroundColor: 'aliceblue'},
        filters: [
            {
                name: '测试',//label展示 label宽度150
                width:220,//组件宽度
                component: 'input',//组件类型
                req: 'req',//请求字段
                key: 'test1',//唯一key
                modal: '',//双向绑定值
                placeholder: '测试',//提示
                verify:(v)=>{
                    return v.length > 10
                }
            },
        ]
    }
]

整体code当时自己认为已经优化到了极致。但是因为做过拖拽组件，当时有大量的不同组件需要渲染，第一次也是使用的component-is去实现，由于需要做双向绑定，组件内一直报出 子组件内不可修改父组件内部的值 的错误,最后没办法全部用v-if写，但是一直是个过不去的坎；

最近在问答里面求助了CSDN的大佬们，有人说会报错，有人说不会，我自己终于下决心再试一试；结果：

  <component :is="info.component"  v-model="info.modal" :info="info" />

没有报错，再看看组件内部：

<template>
<el-input :placeholder="info.placeholder" v-model="val" :maxlength="info.limitLength"   @change="change"></el-input>
</template>

<script>
export default {
    name: 'finput',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: String
        },
        info: {
            type: Object,
            default: () => {}
        }
    },
    created(){
        this.val = this.value
    },
    data() {
        return {
          val:''
        }
    },
    methods: {
        change(e) {
            this.$emit('change',this.val)
        }
    }
}
</script>

而之前报错是什么问题呢，因为没有使用v-model，组件内部也需要配合做更新动作;

包括component-is的props也需要整合成一个，避免在统一时出现分歧;

总结：

• vue-component-is 是可以使用v-model的;
• 具有v-model的每个组件内部值更新时一定要触发v-model的更新

问题：

• 当页面需要构建的组件数量比较多的时候，与普通的写法相比会不会有性能问题
• 还有更好的写法吗