vue中动态组件的使用及相关问题

Posted 2020-12-22 big--bear

<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>