关于vue中的动态组件component和keep-alive

发布时间 2023-11-30 11:11:15作者: 西瓜南瓜哈密瓜

component标签是vue内置的,作用:组件的占位符

<component is="组件名称"></component>

其中is属性的值表示要渲染的组件的名字,也就是components节点下的组件名称

当我们动态切换组件名称时,每切换一次,组件就会被销毁一次,若不想让组件被销毁,则需要用到标签keep-alive

<keep-alive>
     <component is="组件名称"></component>
</keep-alive>

keep-alive可以把内部的组件进行缓存,而不是销毁组件

使用keep-alive标签后会生成两个新的生命周期:activated(组件被激活)、deactivated(组件被缓存)

注意:使用keep-alive标签后,组件第一次被显示时,既会执行created()也会执行activated();当组件第二次显示时,只会执行activated()

  • keep-alive的include属性
<keep-alive include="组件名称,多个组件之间用英文的逗号分隔">
     <component is="组件名称"></component>
</keep-alive>

  include表示:指定需要被缓存的组件,多个组件之间用英文的逗号分隔

  • keep-alive的exclude属性
<keep-alive exclude="组件名称,多个组件之间用英文的逗号分隔">
     <component is="组件名称"></component>
</keep-alive>

  exclude表示:指定不需要被缓存的组件,多个组件之间用英文的逗号分隔

注意:include属性和exclude属性只能用一个,不能同时使用