动态组件指的是动态切换组件的显示与隐藏。 vue 提供了一个内置的
data() { //1.当前要渲染的组件名称 return { comName:'Left'}}<!--2.通过is属性,动态指定要渲染的组件--><!--3.点击按钮,动态切换组件的名称-->
默认情况下,vue切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态,示例代码如下:
keep-alive 对应的生命周期函数
当组件被缓存时,会自动触发组件的 deactivated 生命周期函数。当组件被激活时,会自动触发组件的 activated 生命周期函数。
export default { crkated(){ console.log('组件被创建了') }, destroyed(){console.log('组件被销毁了')}, activated(){console.log('Left组件被激活了!')}, deactivated(){console.log('Left组件被缓存了!') }}
keep-alive 的 include 属性
include 属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔:
Copyright © 2013-2021 河南云和数据信息技术有限公司 豫ICP备14003305号 ISP经营许可证:豫B-20160281