說實話,我一開始也不知道什麼叫按需加載組件,組件還能夠按需加載???後來知道了異步
學不完啊...不要緊,看個人ui
按需加載組件,或者異步組件,主要是應用了component的 is 屬性this
template中的代碼:spa
這裏的每個按鈕,都要顯示不一樣的組件,因此我讓他們使用了同一個方法名code
1 <template slot-scope="scope"> 2 <el-button 3 type="text" 4 size="mini" 5 @click="handleSchedule('CustomerInfoSchedule', scope.row.customer_id)" 6 >詳情</el-button> 7 <el-button 8 type="text" 9 size="mini" 10 @click="handleSchedule('VisitRecordSchedule', scope.row.customer_id)" 11 >回訪</el-button> 12 <el-button 13 type="text" 14 size="mini" 15 @click="handleSchedule('AddCustomerSchedule',scope.row.customer_id)" 16 >編輯</el-button> 17 <el-button 18 type="text" 19 size="mini" 20 @click="handleSchedule('AddPeopleSchedule', scope.row.customer_id)" 21 >添加聯繫人</el-button> 22 </template>
1 <component 2 :is="currentComponent" 3 :customer_id="customer_id" 4 @componentResult="componentResult" 5 > 6 </component>
script中的代碼:component
這裏的組件使用request按需引入,我使用的點擊事件,當事件觸發的時候,引入對應的組件blog
首先在data中聲明組件的屬性事件
1 data() { 2 return { 3 currentComponent: "", 4 customer_id:'', 5 } 6 }
而後註冊組件ip
這裏的組件做爲一個個方法,組件名是方法名,組件內容是方法體,有幾個組件就寫幾個方法get
1 components: { 2 AddCustomerSchedule(resolve) { 3 require(["../components/AddCustomer"], resolve); 4 }, 5 AddPeopleSchedule(resolve) { 6 require(["../components/AddPeople"], resolve); 7 }, 8 CustomerInfoSchedule(resolve) { 9 require(["../components/CustomerInfo"], resolve); 10 }, 11 VisitRecordSchedule(resolve) { 12 require(["../components/VisitRecord"], resolve); 13 }, 14 },
定義的方法
1 // 這裏直接接收name,而後相對應的引入組件,同時傳值 2 handleSchedule(name, id) { 3 this.customer_id = id; 4 this.currentComponent = name; 5 }, 6 // 這是子組件觸發父組件返回回來的方法,由於個人組件都是彈出框 7 // 因此在子組件關閉彈出框的時候,我讓this.currentComponent爲空 8 // 同時能夠選擇性的刷新數據 9 componentResult(type) { 10 if (type == "upData") { 11 this.getTableData(); 12 } else { 13 this.currentComponent = ""; 14 } 15 },