動態組件 & 異步組件
切換組件保持組件的原狀態
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獲取組件然后渲染
參考其他人的 https://blog.csdn.net/weixin_36094484/article/details/74555017
具體使用 感徑訓待考證 這里只是明白相應的作用，明確簡單的案例使用，在專案使用的是時候還得繼續補充其相關的作用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/73752.html
標籤：JavaScript
上一篇：前端：CSS第四章第一節
下一篇：avue表單資料請求