vue-动态组件

作者: 东邪_黄药师 | 来源:发表于2021-08-09 22:43 被阅读0次
1. 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。

2. 如何实现动态组件渲染

vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染。示例代码如下:


image.png
3. 使用 keep-alive 保持状态

默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 <keep-alive> 组件保持动态组
件的状态。示例代码如下:


image.png
4. keep-alive 对应的生命周期函数

当组件被缓存时,会自动触发组件的 deactivated 生命周期函数。
当组件被激活时,会自动触发组件的 activated 生命周期函数。

image.png
5. keep-alive 的 include 属性

include 属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔:


image.png

相关文章

  • vue-动态组件

    1. 什么是动态组件 动态组件指的是动态切换组件的显示与隐藏。 2. 如何实现动态组件渲染 vue 提供了一个内置...

  • Vue父传子、子传夫通信--小案例

    父传子 子传夫 如有不懂,可以看我的 Vue-组件通信

  • Vue-基础-04-重点

    Vue-基础-day04-重点 01-基础-组件-局部组件 组件: 封装html+css+js 两类+三步 定义 ...

  • 4 动画及组件

    vue-> 过渡(动画) (它的本质走的是css3: transtion ,animation) 组件 ...

  • 零基础学vue-动态组件

    总结 组件里面把内容写死,不推荐使用;template:" 个人内容 " 使用 的方式编写组件内容,比第一种好点,...

  • 《目录》

    更新到 111、MD5在项目中的加密のmd5单向加密2、vue-组件化の封装组件、引用组件3、微信小程序开发...

  • vue-组件

    1.Vue中是如何引入组件(对象 构造函数 )1.1. Vue是vue实例的构造函数, 通过new Vue() ...

  • VUE-组件

    组件 组件就是为了拆分Vue实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,...

  • Vue-组件

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功...

  • Vue-组件

    一.组件 组件都具有模板,template new Vue()创建的是根组件 组件与实例一一对应,创建一个实例就是...

网友评论

    本文标题:vue-动态组件

    本文链接:https://www.haomeiwen.com/subject/dymtbltx.html