踩坑记4 keep-alive、emit 仅保存标签页打开的组件

2021.7.14

路由、标签页、keep-alive、emit

坑13（vue3，keep-alive，emit，标签页，Component，缓存，子组件到父组件的信息传递）：目标是缓存标签页中目前打开的Component，在标签页中关闭后不再缓存。方法是使用keep-alive组件+emit函数。

布局组件Layout（父组件）中，放置含标签页的Header组件、路由视图router-view组件及keep-alive组件，设置接受并处理emit信息的函数：

<Header @tabsChanged="getTabsChanged" />

...

<router-view v-slot="{ Component }">

    <keep-alive :include="keepList">

        <component :is="Component" />

    </keep-alive>

</router-view>

...

//setup()中

const state=reactive({

    keepList:['Index']

})

const getTabsChanged=(tabList)=>{

    //将标签页中的路由name转换为组件名

    const tabListComponents=tabList.map(tab=>

        tab.name.split('-')

        .map(n=>{

            n=n[0].toUpperCase()+n.slice(1)

            return n

        })

        .join(''))

    state.keepList=tabListComponents

}

return {

    getTabsChanged,

    ...toRefs(state)

}

头组件Header（子组件中），在路由变化时，发送emit信息：

emits:['tabsChanged'],

setup(props,context) {

...

    router.afterEach((to,from) => {

        ...

        //发送标签页信息到Layout组件，改变keep-alive的缓存列表

        context.emit('tabsChanged',tabList.value)

    }

...

}

by 莫得感情踩坑机(限定)