概述

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

<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>

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

文档更新时间: 2021-09-02 10:32   作者:zyg