component组件的应用

一、component组件的应用场景

例如注册，登录：注册分为邮箱注册和手机注册，弹窗顶部有标签可以切换注册类型，中间是注册表单信息， 经过分析手机注册界面与邮箱注册除了中间的表单内容不一致之外，其他的界面内容是一样的。

实际项目代码设计中，为了保证复用性和可维护性，是会有一些可行的方案。这里我们采用vue内置的component组件来实现这一点。

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

 二、在动态组件中使用keep-alive

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>