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

时间:2023-01-09 21:11:04

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>`,
    }
},