vue项目中keep-alive的用法
vue项目中keep-alive的用法之一,直接在keep-alive标签中使用
<keep-alive>
<personal-form @doPersonData="doPersonData" v-if="pageFlag"></personal-form>
<company-form @returnBackMethon="returnBackMethon" v-else-if="formType==='2'"></company-form>
<join-company-page v-else @returnBackInJoin="returnBackInJoin" ></join-company-page>
</keep-alive>
vue官方keep-alive链接地址如下
vue官方keep-alive链接地址
主要用于保留组件状态或避免重新渲染。
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<transition>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</transition>
注意, 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素, 要求同时只有一个子元素被渲染。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>