一、动态组件
1.1 什么是动态组件
动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染?
1.1.1 component标签基础用法
vue 提供了一个内置的 < component > 组件,专门用来实现动态组件的渲染。示例代码如下
component组件用法,如果要在APP组件上渲染left组件,除了像之前一样最后一步用标签left来渲染之外,还可以在原来标签的地方放一个component组件占位,如果要渲染哪个组件就用component里面的is属性赋值这个组件的名字。
或者可以和上图一样,在data中定义一个变量,值为要渲染的组件名字,然后给is属性动态绑定这个变量,注意是动态绑定,所以要用v-bind或者:来绑定。
点击按钮切换渲染组件的案例
1.1.2 使用keep-alive保持状态
默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。
left组件的数据在切换到right之后再切换回来会重新归零,原因是切换right组件时left组件已被销毁,而新的left是新创建的一个实例对象,和之前的没有关系了。如果想要离开left组件切换到right组件时不被销毁,使用keep-alive保持状态。如下图只需要用keep-alive组件包住需要动态创建和销毁的地方。
这个时候left切换到right时left未被销毁而是被缓存,这时候切换回left时left重新被激活而right被缓存。
keep-alive 对应的生命周期函数
当组件被缓存时,会自动触发组件的 deactivated 生命周期函数。
当组件被激活时,会自动触发组件的 <