概述

在手机端开发时，我们在增加表单组件的时候，之前都是使用如下代码来实现。

<view v-else-if="attr.control=='rx-number'">
    <rx-number v-model="data[attr.name]" :attr="attr" :permission="permission" :metadata="metadata" :subname="subname"
                     :readonly="readonly" />
                     :readonly="readonly"  :data="data"/>
</view>
<view v-else-if="attr.control=='rx-textarea'">
    <rx-textarea v-model="data[attr.name]" :attr="attr" :permission="permission" :metadata="metadata" :subname="subname"
                     :readonly="readonly" />
                     :readonly="readonly" :data="data"/>
</view>

需要写一堆的 if else 代码，非常麻烦且不优雅。

这里可以通过动态组件来简化这部分代码。

优化如下

<component  v-bind:is="attr.control"
                   v-model="data[attr.name]" :attr="attr" :permission="permission" :metadata="metadata" :subname="subname"
                   :readonly="readonly" :data="data"
        ></component>

这样优化后，就只有一行代码，代码变得非常简洁，另外我们增加控件，只要按照标准编写控件，这部分代码也不用更改，实现开闭原则。