vue 动态组件

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>