① 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏。vue 提供了一个内置的 <component> 组件，专门用来实现组件的动态渲染。

<component> 是组件的占位符

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

<component is="要渲染的组件名称"></component>

② 实现动态组件渲染

③ 使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 <keep-alive> 组件保持动态组件的状态

通俗的说：离开组件时，组件会被销毁，再次加载这个组件时，组件会被重新创建，（通过生命周期函数created和unmounted即可证明），组件中的 data 数据会被重置成初始值，如果想组件内部的值保持不变，这时需用到keep-alive

④ 还有一种方法，不依赖于keep-alive 也能保持动态组件的状态，在子组件内部将 data 的值放到默认导出外面，专门使用 const 定义变量，