在这里插入图片描述
@[toc]

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 指令。
<font color='red'>注意点1:</font>使用keep-alive标签嵌套component标签

<font color='red'>注意点2:</font>用生命周期中的mounted(挂载)钩子函数进行组件渲染监听,当组件第一次被渲染后就保存在内存中,下次切换不会被重新渲染。

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

<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'
        }
    });

本人其他相关文章链接

1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点

4.《基础篇第4章》:使用vue脚手架创建项目

5.vue2知识点:数据代理

6.vue2知识点:事件处理

7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)

8.vue2知识点:计算属性与监听属性

9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)

10.vue2知识点:非单文件组件和单文件组件

11.vue2知识点:组件is属性

12.vue2知识点:组件模板定义

13.vue2知识点:组件的props属性、非props属性、props属性校验

14.vue2知识点:组件自定义事件

15.vue2知识点:组件插槽分发

16.vue2知识点:动态组件

17.vue2知识点:混入

18.vue2知识点:浏览器本地缓存

19.vue2知识点:全局事件总线(GlobalEventBus)

20.vue2知识点:消息订阅与发布

21.vue2知识点:nextTick语法

22.vue2知识点:Vue封装的过度与动画

23.vue2知识点:路由

24.vue2知识点:vm调用待$命令介绍

25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)

26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解

27.vue2基础组件通信案例练习:待办事项Todo-list案例练习

28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存

29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件

30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线

31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布

32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮

33.vue2基础组件通信案例练习:把案例Todo-list改成使用动画与过度

34.学习vue2遇到过的问题及个人总结


刘大猫
6 声望1 粉丝

如果有天突然发现路的尽头还是路的话,希望你还没错过太多沿路的风景和眼前珍惜的人。