VUE3之Component(三)

keep-alive

在动态组件中切换组件时会将之前的组件销毁,切换回来时组件会被重新创建,因此该组件的状态和数据就会丢失。

在组件外嵌套一个keep-alive标签可以防止组件被摧毁:

        <keep-alive>
            <component :is="currentTab"
                name="sk"
                :age="18"
                @pageClick="pageClick"></component>
        </keep-alive>

keep-alive有三个属性可以用:include是指哪些组件需要被keep alive,exclude是指不需要的组件,max指明缓存组件的最大数量,替换策略是LRU。

以include为例:

        <keep-alive include="home,about">
            <component :is="currentTab"
                name="sk"
                :age="18"
                @pageClick="pageClick"></component>
        </keep-alive>

include后面可以跟组件名,该组件名必须得在组件中用name属性声明:

// Home.vue
<script>
    export default {
        name: "home",        
    }
</script>

也可以用v-bind:+正则表达式或数组。

发表评论