vue项目实战系列三：component动态组件

1. 动态组件:

①. 通过component标签的is属性来进行组件的切换.

②. is的属性值决定要显示的组件:
    a. 将is的属性值设置为data中的值,以便于动态变化.

(1). example:

<div id="box">
    <input type="button" @click="test='aaa'" value="aaa组件">
    <input type="button" @click="test='bbb'" value="bbb组件">
    <component :is = "test" />
</div>

<script>
new Vue ({
    el: '#box',
    data: {
        test:'aaa'
    },
    components: {
        'aaa': {
            template:'<h2>我是aaa组件</h2>'
        },
        'bbb': {
            template:'<h2>我是bbb组件</h2>'
        }
    }
});
</script>

(2). 业务场景:

①. 开发表单的过程中,会有很多类型的控件:文本框、下拉框等:
    a. 常规方案：v-if来实现.
    b. 推荐：控件配置文件,用于不同的配置组件来实现.

<component :is="currentConfig" :config="config"></component>

export default {
    name: 'App',
    components: {
        rxTextboxConfig,
        rxTextareaConfig,
    },
    mouted:  {
        this.currentConfig = ctlType + "-config"
        if (ctlType == "rx-textbox") {
            this.config.type = "VARCHAR"
        }
        if (ctlType == "rx-textarea") {
            this.config.name = "我是富文本框"
        }
    }
}