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

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

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

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

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

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

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

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

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

總結

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

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