Vue组件之动态组件

动态组件：不同组件之间进行动态切换，通过 Vue 的 元素加一个特殊的 is attribute 实现

1. 基础使用

component 的 is 属性值是组件名，就可以调用该组件

<component is="comb"></component>

<div id="app">
    <component is="comb"></component>
</div>
<script>
    var coma = {
        template: '<div>aaaa</div>'
    }
    var comb = {
        template: '<div>bbbb</div>'
    }
    let vm = new Vue({
        el: '#app',
        components: {
            coma: coma,
            comb: comb,
        }
    })
</script>

2. 动态调用组件示例

<div id="app">
    <button @click="changeComponent('coma')">coma</button>
    <button @click="changeComponent('comb')">comb</button>
    <button @click="changeComponent('comc')">comc</button>
    <component :is="com_name"></component>
</div>
<script>
    var coma = {
        template: '<div>aaaa</div>'
    }
    var comb = {
        template: '<div>bbbb</div>'
    }
    var comc = {
        template: '<div>cccc</div>'
    }
    let vm = new Vue({
        el: '#app',
        data: {
            com_name: 'coma'
        },
        components: {
            coma: coma,
            comb: comb,
            comc: comc,
        },
        methods: {
            changeComponent: function(name) {
                this.com_name = name
            }
        }
    })
</script>

代码效果