前面的话
让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件
概述
通过使用保留的 <component>
元素,动态地绑定到它的 is
特性,可以实现动态组件
也可以直接绑定到组件对象上
缓存
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中
【基础用法】
【条件判断】
如果有多个条件性的子元素,<keep-alive>
要求同时只有一个子元素被渲染
【activated
和 deactivated
】
activated
和 deactivated
在 <keep-alive>
树内的所有嵌套组件中触发
{
{msg}}
【include和
exclude
】
include
和 exclude
属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
匹配首先检查组件自身的 name
选项,如果 name
选项不可用,则匹配它的局部注册名称(父组件 components
选项的键值)。匿名组件不能被匹配
上面的代码,表示只缓存home和archive,不缓存posts