2019獨角獸企業(yè)重金招聘Python工程師標準>>>

1.?主要思路： 在Vue內置組件中，有個名叫component的組件，提供:is屬性用于決定渲染目標，并提供了keep-alive指令把切換過的組件保留到內存中，避免重新渲染。

<keep-alive><component :is="currentTab"></component> </keep-alive>

2.?路由控制： vue+tabs（單頁）, vue-router之類的基本用不上了，直接在母頁上導入組件，注冊到components上供動態(tài)調用即可。

import page1 from './page1.vue' import page2 from './page2.vue'... ...components: {page1,page2 }

3.?數(shù)據(jù)結構： 需求是tabs從一個菜單(可能包含二級菜單)點擊生成，默認有一個tab永不關閉，其余每個tab可關閉和單獨刷新等等。做法是建兩個數(shù)組(或對象)：一個存儲固定的菜單數(shù)據(jù)，另一個空數(shù)組，存儲用戶添加的tab數(shù)據(jù)。注意vue中監(jiān)聽對象或數(shù)組變化。?watch對象和數(shù)組

4. tab刷新問題??vue2新增了activated、deactivated等生命周期鉤子，用于監(jiān)聽keep-alive狀態(tài)。
這樣就可以監(jiān)聽每個tab獲得焦點或者失焦狀態(tài)，以便知道在什么時候執(zhí)行父組件傳過來的命令(如關閉和刷新)。

5.?通訊??v-on和$emit，子組件觸發(fā)$emit，在父組件中可用v-on監(jiān)聽到。更復雜的組件間通信，就需要使用vuex了。

轉載于:https://my.oschina.net/u/560237/blog/1837210

總結

以上是生活随笔為你收集整理的vue tabs 动态组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。