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 莫得感情踩坑机(限定)