(十一)動態組件 & 異步組件

動態組件 & 異步組件

切換組件保持組件的原狀態

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

具體使用 感受還待考證 這裏只是明白相應的做用，明確簡單的案例使用，在項目使用的是時候還得繼續補充其相關的做用