vue2知识点：动态组件

文章目录

• 3.15.动态组件

• 3.15.1使用方式

• 举例：点击a标签下方切换不同组件

• 3.15.2keep-alive

• 本人其他相关文章链接

3.15.动态组件

使用<component>标签的is属性,动态绑定多个组件到一个挂载点,通过改变is绑定值,切换组件。

3.15.1使用方式

举例：点击a标签下方切换不同组件

<div id="app">
    / <a href='#' @click.prevent="page='index'">首页</a>
    / <a href='#' @click.prevent="page='news'">新闻</a>
    / <a href='#' @click.prevent="page='login'">登陆</a>
    <hr>
    <component :is="page"></component>
</div>

<script>
    /***
     * 使用<component>标签的is属性,动态绑定多个组件到一个挂载点,
     * 通过改变is绑定值,切换组件
     * */
    Vue.component('index', {
        template:'<h5>首页</h5>'
    });
    Vue.component('news', {
        template:'<h5>新闻页</h5>'
    });
    Vue.component('login', {
        template:'<h5>登陆页</h5>'
    });
    var app = new Vue({
        el:'#app',
        data:{
            page:'index'
        }
    });
</script>

结果展示

3.15.2keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令。
注意点1：使用keep-alive标签嵌套component标签

注意点2：用生命周期中的mounted（挂载）钩子函数进行组件渲染监听，当组件第一次被渲染后就保存在内存中，下次切换不会被重新渲染。

注意点3：所谓的“避免重新渲染”指的是初始化后首次调用会渲染并打印输出钩子语句，等后续再次点击就不会触发打印，即达到了避免重新渲染的目的。

<div id="app">
    / <a href='#' @click.prevent="page='index'">首页</a>
    / <a href='#' @click.prevent="page='news'">新闻</a>
    / <a href='#' @click.prevent="page='login'">登陆</a>
    <hr>
    <keep-alive>
        <component :is="page"></component>
    </keep-alive>
</div>

Vue.component('index', {
    template:'<h5>首页</h5>',
    mounted: function () {
        console.log('挂载...首页');
    }
});
Vue.component('news', {
    template:'<h5>新闻页</h5>',
    mounted: function () {
        console.log('挂载...新闻页');
    }
});
Vue.component('login', {
    template:'<h5>登陆页</h5>',
    mounted: function () {
        console.log('挂载...登陆页');
    }
});
var app = new Vue({
        el:'#app',
        data:{
            page:'index'
        }
    });