开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 24 天，点击查看活动详情

说点题外话

说正文

在 Vue 2 中，动态组件是指可以根据组件的名称动态地渲染不同的组件。这种组件的渲染方式有两种，分别是使用 <component> 标签和使用 keep-alive 标签。

1. 使用 <component> 标签

使用 <component> 标签可以在父组件中动态地渲染不同的子组件。具体来说，可以在父组件中使用 v-bind:is 或者 :is 指令来指定当前需要渲染的子组件的名称

• App.vue

<template>
  <div>
    <component v-bind:is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

在上面的示例中，父组件中使用 component 标签动态地渲染当前需要显示的子组件，其中 v-bind:is 指令指定了当前需要渲染的子组件的名称为 currentComponent，在父组件中可以通过改变 currentComponent 的值来动态地切换渲染不同的子组件。

2. ### 使用 keep-alive 标签

使用 keep-alive 标签可以在组件之间进行缓存，以避免每次切换组件时都重新渲染。具体来说，可以将 keep-alive 标签包裹在 <component> 标签之外

<!-- 父组件中的模板 -->
<template>
  <div>
    <keep-alive>
      <component v-bind:is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<!-- 父组件中的脚本 -->
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
}
</script>

在上面的示例中，使用 keep-alive 标签将包裹在 <component> 标签之外，从而将渲染的组件进行缓存。在切换组件时，如果组件已经被缓存，则不会重新渲染，而是直接显示缓存中的组件。如果需要刷新缓存中的组件，可以通过在组件中添加 key 属性来强制刷新缓存.

这是因为keep-alive会触发生命周期函数中的actived和deactived两个钩子函数。

如果想要做到不缓存，需要我们手动绑定一个key值触发强制刷新

<!-- 父组件中的模板 -->
<template>
  <div>
    <keep-alive>
      <component v-bind:is="currentComponent" :key="currentComponent"></component>
    </keep-alive>
  </div>
</template>

结束