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中动态组件的使用及相关问题的主要内容,如果未能解决你的问题,请参考以下文章

从 Relay 中的动态组件获取片段

对xxl-job进行simpleTrigger并动态创建任务扩展

如何使用导航架构组件修复动态功能模块中片段的发布版本中的ClassNotFoundException?

Quartz入门以及相关表达式使用

AJAX相关JS代码片段和部分浏览器模型

AOP 面向切面编程