在项目开发过程中，可能会经常遇到一个页面根据条件不同而引用不同的组件，传统的方式是将每个组件引入需要使用组件的vue文件并注册后再逐个嵌入HTML模板中，通过使用v-if或v-show控制页面展示不同的组件，如下图示例：（注：使用v-if时切换组件会重新渲染，使用v-show则会缓存组件。切换时需要初始化组件用v-if（使用v-show则需手动初始化数据较为繁琐），否则使用v-show减小性能消耗）
根据上图例子不难看出使用传统方式时，多个组件引进同一个页面时需要在HTML模板中依次写入，使得代码看起来简洁度不高，而且在多个组件拥有基本一致的属性时维护起来比较繁琐，为解决上述问题，vue.js提供了component元素，动态地绑定到它的 is 特性，可以实现动态组件，如下图示例：
使用这种方式在组件较多时页面文件就会显得简洁很多，当需要展示哪个组件就把组件名绑定到component元素的is属性上，为了便于统一管理不同组件需要传递的属性值或调用的方法，建议把组件的属性值或方法在data中通过一个对象进行封装，在需要切换组件时只需要改变引用对象的key值即可，像上述例子则只需改变serviceType的值便可达到展示不同组件的目的。
另外，通过绑定component元素的is属性实现展示的组件本身并不具备缓存的功能，每次改变它的is属性都会重新渲染一个新的组件，若需要缓存组件则需在该元素外围包裹keep-alive元素，如下图示例：
以上内容如有纰漏或更优解，望不吝赐教~
