Vue动态组件

  1. 什么是动态组件?

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

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

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

<comName>中定义组件名称,在<component>中使用:is绑定数据

:is的值表示要渲染组件的名字

可以使用事件来切换需要显示的组件

  1. 使用 keep-alive 保持状态

默认情况下,切换动态组件时无法保持组件的状态。可以使用keep-alive来保持组件的状态

  1. keep-alive 对应的生命周期函数

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

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

当组件第一次创建时会执行created生命周期函数,也会执行activated生命周期函数。

当组件被激活时会执行activated生命周期函数,但不会直接created生命周期函数,因为组件没有被创建。

  1. keep-alive 的 include 属性

可以include属性来指定需要对哪些组件进行缓存,多个组件用,隔开

  1. keep-alive 的 exclude 属性

exclude属性与include属性相反,可以设置让哪些组件不进行缓存。两者不可同时存在!

最后修改:2022 年 06 月 05 日
如果觉得我的文章对你有用,请随意赞赏