vue按需加載組件,異步組件

說實話,我一開始也不知道什么叫按需加載組件,組件還可以按需加載???后來知道了

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

按需加載組件,或者異步組件,主要是應用了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 = "";
      }
    },