vue實(shí)現(xiàn)按需加載組件及異步組件功能
說實(shí)話,我一開始也不知道什么叫按需加載組件,組件還可以按需加載???后來知道了
學(xué)不完啊...沒關(guān)系,看我的
按需加載組件,或者異步組件,主要是應(yīng)用了component的 is 屬性
template中的代碼:
這里的每一個(gè)按鈕,都要顯示不同的組件,所以我讓他們使用了同一個(gè)方法名
<template slot-scope="scope">
<el-button
type="text"
size="mini"
@click="handleSchedule('CustomerInfoSchedule', scope.row.customer_id)"
>詳情</el-button>
<el-button
type="text"
size="mini"
@click="handleSchedule('VisitRecordSchedule', scope.row.customer_id)"
>回訪</el-button>
<el-button
type="text"
size="mini"
@click="handleSchedule('AddCustomerSchedule',scope.row.customer_id)"
>編輯</el-button>
<el-button
type="text"
size="mini"
@click="handleSchedule('AddPeopleSchedule', scope.row.customer_id)"
>添加聯(lián)系人</el-button>
</template>
<component
:is="currentComponent"
:customer_id="customer_id"
@componentResult="componentResult"
>
</component>
script中的代碼:
這里的組件使用request按需引入,我使用的點(diǎn)擊事件,當(dāng)事件觸發(fā)的時(shí)候,引入對應(yīng)的組件
首先在data中聲明組件的屬性
data() {
return {
currentComponent: "",
customer_id:'',
}
}
然后注冊組件
這里的組件作為一個(gè)個(gè)方法,組件名是方法名,組件內(nèi)容是方法體,有幾個(gè)組件就寫幾個(gè)方法
components: {
AddCustomerSchedule(resolve) {
require(["../components/AddCustomer"], resolve);
},
AddPeopleSchedule(resolve) {
require(["../components/AddPeople"], resolve);
},
CustomerInfoSchedule(resolve) {
require(["../components/CustomerInfo"], resolve);
},
VisitRecordSchedule(resolve) {
require(["../components/VisitRecord"], resolve);
},
},
定義的方法
// 這里直接接收name,然后相對應(yīng)的引入組件,同時(shí)傳值
handleSchedule(name, id) {
this.customer_id = id;
this.currentComponent = name;
},
// 這是子組件觸發(fā)父組件返回回來的方法,因?yàn)槲业慕M件都是彈出框
// 所以在子組件關(guān)閉彈出框的時(shí)候,我讓this.currentComponent為空
// 同時(shí)可以選擇性的刷新數(shù)據(jù)
componentResult(type) {
if (type == "upData") {
this.getTableData();
} else {
this.currentComponent = "";
}
},
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)按需加載組件及異步組件功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue之Vue.use的使用場景，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
從Vue轉(zhuǎn)換看Webpack與Vite 代碼轉(zhuǎn)換機(jī)制差異詳解
這篇文章主要為大家介紹了從Vue轉(zhuǎn)換看Webpack與Vite代碼轉(zhuǎn)換機(jī)制差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)
這篇文章主要介紹了vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格（橫向表頭+縱向表頭）,需要的朋友可以參考下2023-12-12
vue3+vue-router+vite實(shí)現(xiàn)動(dòng)態(tài)路由的全過程
動(dòng)態(tài)路由是根據(jù)不同情況實(shí)時(shí)變化的路由,在權(quán)限管理系統(tǒng)中,動(dòng)態(tài)路由常用于根據(jù)用戶角色分配不同的菜單和功能,這篇文章主要介紹了vue3+vue-router+vite實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)資料,需要的朋友可以參考下2024-10-10
解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩
這篇文章主要介紹了如何在Vue項(xiàng)目中添加接口監(jiān)聽遮罩,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue學(xué)習(xí)筆記之slot插槽基本用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽基本用法,結(jié)合實(shí)例形式分析了vue slot插槽基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作
這篇文章主要介紹了vue使用計(jì)算屬性完成動(dòng)態(tài)滑竿條制作，文章圍繞計(jì)vue算屬制作動(dòng)態(tài)滑竿條的相關(guān)代碼完成內(nèi)容,需要的朋友可以參考一下2021-12-12
vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊導(dǎo)航欄滾動(dòng)頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動(dòng)操作的函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11