溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
說實話,我一開始也不知道什么叫按需加載組件,組件還可以按需加載???后來知道了
學不完啊...沒關系,看我的
按需加載組件,或者異步組件,主要是應用了component的 is 屬性
template中的代碼:
這里的每一個按鈕,都要顯示不同的組件,所以我讓他們使用了同一個方法名
<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)"
>添加聯系人</el-button>
</template>
<component
:is="currentComponent"
:customer_id="customer_id"
@componentResult="componentResult"
>
</component>
script中的代碼:
這里的組件使用request按需引入,我使用的點擊事件,當事件觸發的時候,引入對應的組件
首先在data中聲明組件的屬性
data() {
return {
currentComponent: "",
customer_id:'',
}
}
然后注冊組件
這里的組件作為一個個方法,組件名是方法名,組件內容是方法體,有幾個組件就寫幾個方法
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,然后相對應的引入組件,同時傳值
handleSchedule(name, id) {
this.customer_id = id;
this.currentComponent = name;
},
// 這是子組件觸發父組件返回回來的方法,因為我的組件都是彈出框
// 所以在子組件關閉彈出框的時候,我讓this.currentComponent為空
// 同時可以選擇性的刷新數據
componentResult(type) {
if (type == "upData") {
this.getTableData();
} else {
this.currentComponent = "";
}
},
總結
以上所述是小編給大家介紹的vue實現按需加載組件及異步組件功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
