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 = "我是富文本框"
}
}
}