vue-learning：34 - component - 内置组件 - 动态组件component 和 is属性

component动态组件 / is属性

让多个组件使用同一个挂载点，并动态切换，这就是动态组件。

必要条件：

• 组件标签使用<component></component>
• 动态绑定使用is特性v-bind:is=""

 <div id="app">
    <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>`,
    }
},