vue中动态组件的使用及相关问题
Posted big--bear
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中动态组件的使用及相关问题相关的知识,希望对你有一定的参考价值。
<component v-bind:is="currentTabComponent"></component>
动态组件主要是运用 is 属性 达到切换组件的效果。
如何使动态组件保持状态--- keep-alive (有时候,我们希望能保持被动态加载组件的状态,已避免反复重复渲染导致的性能问题)
<keep-alive> <component :is="currentTabComponent"></component>
</keep-alive>
但是,我们在使用keep-alive来保持组件状态的同时, 也带来了另外一个问题, 就是第二进入页面之后, 组件的钩子函数created 和 mounted 不会再次被触发(除了activated钩子外, 都不会触发)
解决办法:
1. 在对应组件中, 加activated钩子函数再次请求数据接口。
2. 或者, 使用exclude来忽略对应缓存的组件 (只适用于单个组件)
<keep-alive exclude="posts"> <component :is="currentTabComponent"></component> </keep-alive>
以上是关于vue中动态组件的使用及相关问题的主要内容,如果未能解决你的问题,请参考以下文章
对xxl-job进行simpleTrigger并动态创建任务扩展