动态组件

动态组件

通过使用保留（自定义组件的时候名称不能写这个保留的名称）的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点（挂载点就是component元素的位置），并动态切换。

语法：

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

keep-alive的作用：

keep-alive可以将已经切换出去的非活跃组件保留在内存中。如果把切换出去的组件保留在内存中，可以保留它的状态，避免重新渲染。

实例：

<div id="app">
    <div>
        <button @click="changeCmp('cmp1')">切换到组件1</button>
        <button @click="changeCmp('cmp2')">切换到组件2</button>
        <button @click="changeCmp('cmp3')">切换到组件3</button>
    </div>
    <!-- 避免重新渲染 -->
    <keep-alive>
        <!-- 切换：只要改变了is属性绑定的值，显示的组件就发生了变化 -->
        <component :is="current"></component>
    </keep-alive>
</div>
<script src="./js/vue.js"></script>
<script>
    // 定义三个组件
    var cmp1 = {
        template: `<div>第一组件的内容</div>`,
        created() {
            console.log('1从头开始');
        },
    };
    var cmp2 = {
        template: `<div>第二组件的内容</div>`,
        created() {
            console.log('2从头开始');
        },
    };
    var cmp3 = {
        template: `<div>第三组件的内容</div>`,
        created() {
            console.log('3从头开始');
        },
    };
    new Vue({
        el: "#app",
        data: {
            // 默认显示第一个组件
            current: 'cmp1',
        },
        components: {
            cmp1,
            cmp2,
            cmp3,
        },
        methods: {
            changeCmp: function (cmp_name) {
                this.current = cmp_name;
            },
        },
    });
</script>

试一试