vue动态组件

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

vue中有个动态组件的概念，动态组件有很多使用场景，例如不同角色登录需展示不同的界面样式，此时页面是同有个，这时候就可以用动态组件来实现，同时使用keep-alive包裹的组件还可以实现缓存状态的效果。我们一起看看吧~

什么是动态组件？

动态组件是在运行时在组件之间动态切换的方法。

使用场景：

• 不同用户登录展示不同的内容
• 多标签的页面切换不用跳转不同路由
• 点击不同的按钮出现不同的弹窗

动态组件的好处：

• 可以使我们的的代码具有可重用性。只用一个元素，就可以实现效果，省去了使用v-if来切换组件，具有更好维护性和可读性。
• 用动态组件可以使页面更具交互性，省去了页面负载，可以给用户更好的体验效果。

怎么使用 Vue 动态组件？

• <component> 元素
• v-bind:is 属性

<component>元素用于我们声明动态组件，并用 :is来指向已经注册的组件。

:is 属性可以传递两种类型的参数：

• 组件的名称
• 组件的选项对象

动态组件使用实例

js代码 引入组件

<script>
  import ComponentA from '@/components/A.vue'
  import ComponentB from '@/components/B.vue'
  export default {
    components: {
      ComponentA,
      ComponentB
    },
    data () {
      return {
        comp: ComponentA
      }
    },
    
  }
</script>

html代码

通过:is属性动态的指定要渲染的组件

<template>
  <div>
    <button @click='comp = ComponentA'>Component A</button>
    <button @click='comp = ComponentB'>Component B</button>
    <component :is='component' />
  </div>
</template>

使用 keep-alive 缓存实例

切换动态组件时无法保持组件的状态。这时候可以使用vue 内置的 <keep-alive> 组件包裹组件来保持动态组件的状态。以避免反复重新渲染导致的性能

<keep-alive>
    <component :is='component' />
</keep-alive>

• keep-alive 会把内部的组件进行缓存，而不是销毁组件；
• 使用 keep-alive 的时候，可以通过 include 来指定有哪些组件需要被缓存,或通过 exclude 属性来指定哪些组件不需要被缓存；不要同时用这两个属性

<keep-alive include="left,right">
    <component :is='component' />
</keep-alive>

keep-alive 对应的生命周期函数

• 当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
• 当组件被激活时，会自动触发组件的 activated 生命周期函数。