Vue2 动态组件

动态切换组件的显示与隐藏

component 组件

实现动态组件的渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
 <div>
   <component :is="comName"></component>
  </div>
</template>

<script>
import NavBar from '@/components/NarBar.vue'
  
export default {
  data() {
    return {
     comName: 'NavBar'
    }
  },
  components: {
   NavBar
  }
};
</script>

component 相当于组件的占位符

is 属性的值，就是要渲染的组件的名字

keep-alive

保持组件不被销毁

1
2
3
4
5
6
7
<template>
 <div>
    <keep-alive>
    <component :is="comName"></component>
   </keep-alive>
  </div>
</template>

被 keep-alive 包裹的组件被隐藏时，不会被销毁，而是在内存中缓存

keep-alive 生命周期函数

  • deactivated

组件被缓存时

  • activated

组件被激活时

当组件第一次被创建时，即会执行 created 生命周期函数，又会执行 activated 生命周期函数

include

设置那些组件会被缓存

1
2
3
4
5
6
7
<template>
 <div>
    <keep-alive include="NavBar,Nav">
    <component :is="comName"></component>
   </keep-alive>
  </div>
</template>

include 属性指定只与属性值相匹配的组件才会被缓存

exclude

设置那些组件不被缓存

1
2
3
4
5
6
7
<template>
 <div>
    <keep-alive exclude="Other">
    <component :is="comName"></component>
   </keep-alive>
  </div>
</template>

exnclude 属性指定与属性值相匹配的组件不会被缓存

exclude 属性与 include 属性不能同时使用