Vue component动态组件/is属性

动态组件：多个组件使用同一个挂载点，并动态切换。

必要条件：

组件标签使用：<component></component>

动态绑定使用is特性v-bind:is=""

<div id="main">    
    <button @click="changeCom('home')">Home</button>
    <button @click="changeCom('page')">page</button>
    <button @click="changeCom('about')">About</button>
<component :is="variable"></component>

</div>

const vm = new Vue({
    el: "#app",
    components: {
        home: {template: `<div>home</div>`},
        page: {template: `<div>page</div>`},
        about: {template: `<div>about</div>`},
    },
    data: {
        variable: 'home'
    },
    methods: {
        changeCom(name) {
            this.variable = name
        }
    }
})

is绑定组件的是组件name属性值，也可以绑定一个组件的构造器选项对象。

<component :is="comOptions"></component>

 

data: {
    comOptions: {
        template: `<div>直接传入一个组件的选项对象</div>`,
    }
},