vue按需載入元件,非同步元件

說實話,我一開始也不知道什麼叫按需載入元件,元件還可以按需載入???後來知道了

學不完啊...沒關係,看我的

按需載入元件,或者非同步元件,主要是應用了component的 is 屬性

template中的**:

這裡的每乙個按鈕,都要顯示不同的元件,所以我讓他們使用了同乙個方法名

1

<
template 
slot-scope
="scope"
>
2<
el-button
3type
="text"
4size
="mini"
5@click
="handleschedule('customerinfoschedule', scope.row.customer_id)"
6>詳情
el-button
>
7<
el-button
8type
="text"
9size
="mini"
10@click
="handleschedule('visitrecordschedule', scope.row.customer_id)"
11>回訪
el-button
>
12<
el-button
13type
="text"
14size
="mini"
15@click
="handleschedule('addcustomerschedule',scope.row.customer_id)"
16>編輯
el-button
>
17<
el-button
18type
="text"
19size
="mini"
20@click
="handleschedule('addpeopleschedule', scope.row.customer_id)"
21>新增聯絡人
el-button
>
22template
>

1

<
component 
2:is
="currentcomponent"
3:customer_id
="customer_id"
4@componentresult
="componentresult"
5>
6component
>

script中的**:

這裡的元件使用request按需引入,我使用的點選事件,當事件觸發的時候,引入對應的元件

首先在data中宣告元件的屬性

1

data() 
6 }

然後註冊元件

這裡的元件作為乙個個方法,元件名是方法名,元件內容是方法體,有幾個元件就寫幾個方法

1

components: ,
5addpeopleschedule(resolve) ,
8customerinfoschedule(resolve) ,
11visitrecordschedule(resolve) ,
14 },

定義的方法

1

//這裡直接接收name,然後相對應的引入元件,同時傳值
2handleschedule(name, id) ,6//
這是子元件觸發父元件返回回來的方法,因為我的元件都是彈出框7//
所以在子元件關閉彈出框的時候,我讓this.currentcomponent為空8//
同時可以選擇性的重新整理資料
9componentresult(type) else
15 },

vue元件的按需載入

一 require.ensure require.ensuire dependencies string,callback function require errorcallback function error chunkname string const list resolve list w...

vue路由懶載入,元件按需載入

懶載入也叫延遲載入，即在需要的時候進行載入，隨用隨載。在單頁應用中，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用...

vue 按需載入引用echarts中元件

目錄 第一步 引用echarts元件庫 第二步 main.js中全域性配置主模版 第三步 封裝echarts折線圖line元件 第四步 在需要使用頁面中引用line元件。專案中我們一般會全域性引用echarts元件庫，開發起來方便。發現專案檔案體積過大，首屏載入也會慢。為了解決首屏載入速度問題，專案...