(十一)动态组件 & 异步组件

动态组件 & 异步组件

切换组件保持组件的原状态

1.使用 is 进行组件的切换显示

<component v-bind:is="currentTabComponent"></component>

这样是从新建立了组件 若是要保持组件的状态，好比打开的菜单栏仍是保持展开的 ，就能够这样

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

异步组件

1.定义
就是组件在定义的时候什么都不作，只是在须要组件的时候进行加载，第一次加载完成后，进行缓存，下次访问直接用
2.实现按需加载
Vue实现按需加载，官方推荐使用结合webpack的代码分割功能进行。定义为异步加载的组件，在打包的时候，会打包成单独的js文件存储在static/js文件夹里面，在调用时使用ajax请求回来插入到html中。
简单例子实现：

<template>
	<button @click="show">展现加载子组件</button>
	<div v-if="ifshow">
		<p>展现组件</p>
		 <child></child>
	</div>
</template>
<script>
export default {
 components: {
   	'child': function(resolve) { require(['./components/child.vue'], resolve);
  }
  data(){
        return {
         ifshow:false
        }
  },
  methods: {
        showchild:function(){
           this.show=true;
         }
  },

</script>

child.vue是异步组件，因此会先ajax获取组件而后渲染
参考其余人的 http://www.javashuo.com/article/p-bzryemar-ns.html

具体使用 感受还待考证 这里只是明白相应的做用，明确简单的案例使用，在项目使用的是时候还得继续补充其相关的做用