Vue_05(动态组件)

动态组件 & 异步组件 | Vue.js https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive

切换组件案例

点击一个tab-bar,切换不同的组件显示

Vue_05(动态组件)

  方式一:通过v-if来判断,显示不同的组件;
  方式二:动态组件的方式

# 1
<template v-if="currentTab === 'home'">
    <home></home>
</template>
<template v-else-if="currentTab === 'about'">
    <about></about>
</template>
<template v-else>
    <category></category>
</template>

#2
<component :is="currentTab"></component>

注意:切换组件后,原组件会被销毁掉,再次回来时会重新创建组件。在开发中某些情况我们希望继续保持组件的状态,而不是销毁掉,这个时候我们就可以使用一个内置组件:

keep-alive

<keep-alive include="home,about">
      <component :is="currentTab"></component>
</keep-alive>

keep-alive属性     内置组件 | Vue.js https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive

  include - string | RegExp | Array。只有名称匹配的组件会被缓存;
  exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存;
  max - number | string。最多可以缓存多少组件实例,一旦达到这个数字,那么缓存组件中最近没有被访问的实例会被销毁;

 

缓存组件的生命周期 

对于缓存的组件来说,再次进入时,我们是不会执行created或者mounted等生命周期函数的:
  但是有时候我们确实希望监听到何时重新进入到了组件,何时离开了组件;
  这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听

activated() {
      console.log(activated)
    },
    deactivated() {
      console.log(deactivated)
    },

  

上一篇:如何通过代码实现访问触发频率抵御CC攻击-借助SharkCDN快速部署自定义防护模式


下一篇:vue中使用keep- alive缓存机制,切换标签含有iframe标签的界面会被重新刷新的问题处理