- 动态组件:
- 通过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>