㈠ 15《Vue 入門教程》Vue 動態組件 & keep-alive
本小節我們將介紹 Vue 的動態組件，以及緩存 keep-alive 的使用。包括動態組件的使用方法，以及如何使用 keep-alive 實現組件的緩存效果。
動態組件是讓多個組件使用同一個掛載點，並動態切換。動態組件是 Vue 的一個高級用法，但其實它的使用非常簡單。keep-alive 是 vue 的內置組件，能在組件切換過程中將狀態保存在內存中，防止重復渲染 DOM。
通過使用保留的 元素，動態地把組件名稱綁定到它的 is 特性，可以實現動態組件：
實例演示
"運行案例" 可查看在線運行效果
代碼解釋： HTML 代碼第 2 行，我們使用動態組件 component，將當前需要展示的組件名通過變數 currentView 綁定到 component 的 is 屬性上。 HTML 代碼第 3-5 行，我們定義了三個按鈕，通過點擊按鈕切換 currentView 的值。 JS 代碼第 3-11 行，我們定義了組件 ComponentA、ComponentB、ComponentC。
最終的實現效果是：當點擊按鈕的時候會動態切換展示的組件。
keep-alive 是 Vue 提供的一個抽象組件，用來對組件進行緩存，從而節省性能，由於是一個抽象組件，所以在頁面渲染完畢後不會被渲染成一個 DOM 元素。被 keep-alive 緩存的組件只有在初次渲染時才會被創建，並且當組件切換時不會被銷毀。
keep-alive 的用法相對簡單，直接使用 keep-alive 包裹需要緩存的組件即可：
實例演示
"運行案例" 可查看在線運行效果
代碼解釋： HTML 代碼第 2-3 行，我們使用 keep-alive 包裹動態組件 component，將當前需要展示的組件名通過變數 currentView 綁定到 component 的 is 屬性上。 HTML 代碼第 5-7 行，我們定義了三個按鈕，通過點擊按鈕切換 currentView 的值。 JS 代碼第 3-29 行，我們定義了組件 ComponentA、ComponentB、ComponentC，分別定義了他們的 created 和 beforeDestroy 事件。
之前我們介紹過， keep-alive 緩存的組件只有在初次渲染時才會被創建。所以，我們通過修改 currentView 切換組件時，組件的 beforeDestroy 事件不會觸發。若該組件是第一次渲染，會觸發 created 事件，當再次切換顯示該組件時，created 事件不會再次觸發。
activated 和 deactivated 和我們之前學習的生命周期函數一樣，也是組件的生命周期函數。不過， activated 和 deactivated 只在 內的所有嵌套組件中觸發。 activated ：進入組件時觸發。 deactivated ：退出組件時觸發。
示例代碼：
實例演示
"運行案例" 可查看在線運行效果
代碼解釋： JS 代碼中，我們定義了組件 ComponentA、ComponentB，並分別定義了他們的 activated 和 deactivated 事件函數。 HTML 代碼第 2-3 行，我們使用 keep-alive 包裹動態組件 component，將當前需要展示的組件名通過變數 currentView 綁定到 component 的 is 屬性上。 HTML 代碼第 5-6 行，我們定義了兩個按鈕，通過點擊按鈕切換 currentView 的值。當我們切換組件顯示時，可以看到這樣的列印信息：
include 和 exclude 是 keep-alive 的兩個屬性，允許組件有條件地緩存。 include： 可以是字元串或正則表達式，用來表示只有名稱匹配的組件會被緩存。 exclude： 可以是字元串或正則表達式，用來表示名稱匹配的組件不會被緩存。
示例：
實例演示
"運行案例" 可查看在線運行效果
代碼解釋： HTML 代碼第 2-4 行，我們使用 keep-alive 包裹動態組件 component。給 keep-alive 指定需要緩存組件 ComponentA，ComponentB。 在之前的小節我們了解到 keep-alive 緩存的組件只有在初次渲染時才會被創建。所以，在案例中，組件 ComponentA 和 ComponentB 的 created 函數只有在第一次組件被創建的時候才會觸發，而 ComponentC 的 created 函數當每次組件顯示的時候都會觸發。
exclude 示例：
實例演示
"運行案例" 可查看在線運行效果
代碼解釋： HTML 代碼第 2-4 行，我們使用 keep-alive 包裹動態組件 component。給 keep-alive 指定不需要緩存組件 ComponentA，ComponentB。
本節，我們帶大家學習了動態組件和緩存組件在項目中的運用。主要知識點有以下幾點：
㈡ vue在不點擊組件的情況下怎麼生成組件
這里分享下vue在不點擊組件的情況下生成組件的方法。
設備：聯想電腦
系統：xp
軟體：VUE APPv1.9.23
1、首先在打開的軟體中，創建一個js文件，用於存放組件。
㈢ Vue中動態注入組件
源自 https://juejin.im/post/5de1d7d25188252112798118
Mark留存
㈣ vue項目實現動態路由和動態菜單搭建插件式開發框架免費源碼
以往我們在開發vue項目的時候，總是通過將路徑和路由寫在route/index.js文件中，然後直接進行訪問即可，一般實現許可權匹配都是通過菜單下面的許可權參數和路由守衛進行一個驗證攔截和許可權匹配，然而這樣安全性仍然不足。因為我們在route/index.js中已經寫滿了所有的路由，這樣子不僅造成靜態路由內容過多、修改困難，同時當靜態路由內容過多的時候，我們在路由中的內容就顯得極其復雜。
而後端對前端的控制也顯得較為無力，無法實現嚴格性的控制。
由此我們發現通過動態路由控制是必然的，此時我們只需要通過後端獲取數據菜單和路由信息json，然後動態添加路由並生成菜單，使菜單與動態路由內容進行一個匹配，這樣子我們可以實現由後端控制前端的菜單和路由，我們的項目往往只需要內置幾個組件無需許可權的公共頁面如登陸、注冊、忘記密碼和404錯誤這幾個常用頁面組件。
我們只需要將寫好的組件放置到我們的view視圖下，然後我們通過動態的路由和菜單實現路由添加和菜單進行匹配，我們便可實現對插件進行訪問，我們減少了對route/index.js內容寫入，同時也有利於減少內存的佔用。
我們通過動態路由的形式，我們生成的菜單許可權更加的完善，不僅實現依靠菜單與路由守衛攔截實現鑒權，也可以通過動態路由實現動態載入vue文件，控制更加深度
我們通過動態路由的形式，我們可以將項目分給不同的人進行完成，便於組建一個開發團隊，因為他們所開發的組件，我們只需要在具備基本的javascript庫的情況下。我們直接進行動態路由的一個掛載和菜單生成便可完成項目合作，減少了對route/index.js文件的操作，保證項目的完整性。
最後我發現在非node環境的開發條件下，我們可以實現遠程的vue文件載入，這不僅為我們開發提供了便利，同時也有利於我們及時修改文件，以達到項目的需求，更有利於保障安全，實現伺服器vue文件載入。
Vue：2.6.11。
Vue-route：3.2.0。
主頁
聊天
第一通過後端返回的一個路由json數據，我們通過前端生成符合路由路由靜態內容數組的一個數組，然後再通過addRoute進行一個循環添加，我們以此生成動態路由。在登陸時獲取後端返回的菜單信息，我們進行菜單的一個循環生成，由此我們的一個動態項目就已經完成。
第二怎樣對動態路由和菜單項目進行一個管理。
我們首先可以通過搭建一個組件通過添加路由信息和管理菜單實現二者的動態匹配。我們只需要對路由信息進行一個添加和修改，並和菜單相互間進行匹配，我們便可實現簡單的路由掛載。
組件管理
菜單管理
此時將數據提交的後端由後端進行數據保存，我們此時的組件只需要放在views文件夾下，添加路由進行文件載入，我們便可實現路由管理。
第一登陸頁面配置。
我們需要在靜態文件夾下創建一個menu.json和route.json。兩個json文件模擬伺服器登錄時返回的數據。
我們在登錄頁面模擬獲取數據之後，我們通過菜單的一個方法進行生成菜單，通過路由的方法生成路由數組並進行循環添加，然後執行路由跳轉。
第二配置路由初始化內容。我們將route/index.js的路由信息填為空是非常不理智的，而且會報錯，因為路由初始化在載入前已經完成。有些頁面完全不需要許可權便可訪問，比如登錄、注冊、找回密碼和404錯誤，這種不需要許可權的頁面，我們還是需要將其直接以靜態的形式寫在route/index.js文件中。
Index初始數據
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue . use ( VueRouter )
const routes = [{
path: '/' , //訪問url
name: 'login' , //路由名稱
component : () => import ( '@/unitui/pages/Login.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "登錄" //網站標題
}
},
{
path: '/register' , //訪問url
name: 'register' , //路由名稱
component : () => import ( '@/unitui/pages/Register.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "注冊" //網站標題
}
},
{
path: '/forget' , //訪問url
name: 'forget' , //路由名稱
component : () => import ( '@/unitui/pages/Forget.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "找回密碼" //網站標題
}
},
{
path: '/404' , //訪問url
name: '404' , //路由名稱
component : () => import ( '@/unitui/pages/404.vue' ), //載入模板文件
meta: {
show_site: 0 , //是否全屏顯示
web_title: "404錯誤" //網站標題
}
},
]
const router = new VueRouter ({
routes
})
router . beforeEach (( to , from , next ) => {
document . title = to . meta . web_title
console . log ( to );
next ()
})
export default router
第三，關於防止刷新後丟失的問題。我們需要在app.vue文件中的methods方法中定義一個路由生成方法。
示例：
init_route () { //初始化路由，防止刷新丟失
if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有後端已經返回數據的情況下才允許生成
const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //獲取路由信息
const data = []; //默認路由數組
for ( let index = 0 ; index < route_data . length ; index ++) { //生成路由信息
data [ index ] = {
path: route_data [ index ]. path , //訪問url
name: route_data [ index ]. name , //路由名稱
component : resolve =>
require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //載入模板文件
meta: {
show_site: route_data [ index ]. meta . show_site , //是否全屏顯示
web_title: route_data [ index ]. meta . web_title //網站標題
}
};
}
for ( let index = 0 ; index < data . length ; index ++) { //循環添加路由
this . $router . addRoute ( data [ index ]);
}
}
}
在mounted中進行方法調用，防止刷新的時路由丟失，導致發生錯誤。該方法內容基本和登陸頁面的菜單出路由初始內容基本相同，但我們唯一差別的是，我們需要判斷登陸所獲取的路由信息是否存在，只有在存在的時候及後端已經返回了路由信息，即證明登錄成功的時候，我們才會動態添加路由。
第一在刷新之後，默認跳轉到path:』*』的一個路由界面中去，此時我們解決方法只需要將path:』*』路由進行一個刪除,將其刪除就變可正常訪問。
第二動態路由跳轉時發生Cannot find mole xxx錯誤。
意思是無法載入我們指定的一個vue文件，這是由於route3.0版本後import方式不支持傳入變數，此時我們只需要將其改為require方式便可。
我們此次動態vue項目開發已經基本完成，我的開發的項目是基於element-ui進行，那麼如果你需要源碼參考。可以私信回復unit便可獲取。
㈤ 關於Vue動態組件的插入
工作中經常使用elementUI組件，處理大型表單頁面時經常在template里寫各種亂七八糟的組件，有時候經常想用v-for來處理組件，經常忘記，特做一筆記
js文件寫法：
對於組件內插槽，可以使用插入template的方法動態載入
㈥ vue 通過 component 動態渲染組件
註：自定義組件名稱不可與內置標簽名稱重復（如：input、el-input等等...）
註：如果想動態引入多個不同的組件，可創建多個組件文件，並在assembly.js中定義名稱，render.vue中通過v-for循環出來
特別備註：
參考借鑒網址： https://www.jianshu.com/p/ae50ece6cbaa
㈦ vue中父組件如何動態修改子組件的值
1.使用ref修改
$refs:
在Vue中，父組件可以通過 $refs來管理通過ref注冊過的所有子組件，即 $refs對象下可以包含很多 $ref對象.
創建兩個組件分別是父組件：aaa.vue 子組件：bbb.vue
父組件操作（aaa.vue）
在子組件上添加ref=「child」命名。
給按鈕添加一個方法，
方法內使用 this.$refs.child.dlshow=true直接修改子組件的data數據中的dlshow內容。
方法內使用this.$refs.child.dlff(1)給子組件的dlff方法傳遞參數1
/*父組件*/
登錄一下吧
子組件操作（bbb.vue）
2.使用props傳遞父傳子
props是通過父組件值扔給給子組件，子組件使用props來接住值！
父組件操作（aaa.vue）
給子組件使用v-bind傳過來的鍵名和它的值:shuju=「dlshow」
在data中定義對應的dlshow
/*父組件*/
登錄一下吧
子組件操作（bbb.vue）
使用props接收父組件扔過來的key鍵和參數類型。
原文鏈接：https://blog.csdn.net/m0_57146100/article/details/119617880
㈧ vue中非同步組件實現動態掛載
首先，我們要明確什麼是非同步載入組件，那與之對應的同步載入組件又是怎麼一回事呢？字面意思就是，同步載入就是指，隨著項目的初始化完成，所有要用到的組件都已經被載入到頁面中了，有時候，我們是通過設置樣式的方式讓其隱藏。雖然這種方式能解決我們的大部分問題，但是在追求 首屏載入時間最短 的情況下，一次性載入所有的組件，並不是一個很明智的選擇。
我們可以通過先載入一部分頁面必須的組件，另外一部分組件當需要的時候在載入，比如 登錄組件 ，當我們點擊 登錄按鈕 的時候，再載入登錄組件。
為了我們可以看到效果，我們要移步到瀏覽器的netWork面板。當頁面初始化的時，載入的文件如下圖所示
0.js
從中，我們可以看出組件非同步載入的身影了！
㈨ [vue3進階] 2.動態組件
之前我們用到一個組件的時候，在模板里寫上組件的標簽就可以使用了
這樣，在頁面上就會顯示這個組件，這個組件是固定的
動態組件是不固定要顯示哪個組件，只是有個component標簽，表示在模板的相應位置有一個組件，
它具體顯示哪個組件，要根據它的is屬性來決定
is綁定currentComponent是一個字元串，表示一個組件的名字，組件名字改變時，component標簽這個位置顯示的組件就會變化
還是用我們之前用過的兩個組件做示例，表示兩個不同的組件componentA和componentB，在點擊按鈕時，切換組件，
點擊按鈕就可以切換顯示的組件
動態組件的內容就是這么簡單，下面我們來舉一個實際應用中的例子，
比如在一個應用中的個人中心，有幾個模塊
假如這幾個模塊顯示的順序，或者哪個模塊顯示、哪個模塊不顯示是根據用戶的不同有所區別的，
那麼我們可以使用動態組件去實現這個功能，
1）把這個組件名字都放到一個數組里，
2）通過for循環把這些組件用動態組件寫在template中
3）控制數組的順序和內容，實現組件的順序和顯示
這節課就是這些內容了，下節課再見。
㈩ Vue組件的使用
通過ref來獲取頁面上的dom
若在一個組件<item>中添加上ref，那麼獲取到的dom就是對應的組件，也就是可以獲取到組件的引用。
可以獲取到組件中定義的data數據
父組件傳值給子組件通過屬性來傳。
過來的值賦值給定義的值，然後修改那個值
子組件通過事件觸發來向父組件傳值
定義一個全局組件
父組件給子組件通過屬性傳遞一些值，而子組件做的一些約束就是組件的參數校驗
父組件要傳一個名叫content的屬性，而子組件剛好定義了content的prop，這個就是props特性
非props特性
例如：給子組件的標簽中定義一個click事件
上面的實現是錯誤的，原因就是在子組件中定義的@click中的click是監聽的自定義事件的名稱，它是接收子組件觸發的事件名稱，如：this.$emit('click')，@click是接收這樣的事件的，並不是我們熟知的點擊事件
實現上面的例子
方法一：
方法二
在click中添加.native就可標明為原生事件
方法一，使用Vuex
方法二，使用發布訂閱模式，也稱為匯流排機制
怎麼使父組件給子組件優雅的傳遞dom，例如父組件要給子組件傳遞<p>Dell</p>
按以往的方法應該是
使用slot可以解決問題
如果template中有多個<slot>，那怎麼確定哪個slot要那些dom呢
可以通過名稱來確定對應的dom，如
通過動態組件來怎麼實現呢
切換的時候，每次都是先銷毀，然後再創建子組件，每次切換都銷毀和創建
v-once就是為了避免這種情況的發生，使用v-once第一次展示的時候，會將組件放到內存中，第二次就不需要創建組件了，可以直接從內存中讀取到
參考
Vue.js API文檔
慕課網：Vue2.5開發去哪兒網App 從零基礎入門到實戰項目