欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)按需加載組件及異步組件功能

 更新時間:2019年05月27日 16:59:56   作者:浚琦  
這篇文章主要介紹了vue實現(xiàn)按需加載組件和異步組件,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值 ,需要的朋友可以參考下

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

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

按需加載組件,或者異步組件,主要是應用了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)"
    >添加聯(lián)系人</el-button>
   </template>

 <component 
 :is="currentComponent" 
 :customer_id="customer_id" 
 @componentResult="componentResult"
 >
 </component>

script中的代碼:

這里的組件使用request按需引入,我使用的點擊事件,當事件觸發(fā)的時候,引入對應的組件

首先在data中聲明組件的屬性

 data() {
 return {
  currentComponent: "",
  customer_id:'',
 }
 }

然后注冊組件

這里的組件作為一個個方法,組件名是方法名,組件內(nèi)容是方法體,有幾個組件就寫幾個方法

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;
  },
 // 這是子組件觸發(fā)父組件返回回來的方法,因為我的組件都是彈出框
 // 所以在子組件關閉彈出框的時候,我讓this.currentComponent為空
 // 同時可以選擇性的刷新數(shù)據(jù)
  componentResult(type) {
  if (type == "upData") {
   this.getTableData();
  } else {
   this.currentComponent = "";
  }
  },

總結(jié)

以上所述是小編給大家介紹的vue實現(xiàn)按需加載組件及異步組件功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解

    vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解

    這篇文章主要介紹了vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解,文中通過示例代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2020-07-07
  • 在使用vuex的時候出現(xiàn)commit未定義錯誤的解決

    在使用vuex的時候出現(xiàn)commit未定義錯誤的解決

    這篇文章主要介紹了在使用vuex的時候出現(xiàn)commit未定義錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 在vue項目中引用Iview的方法

    在vue項目中引用Iview的方法

    iView 是一套基于 Vue.js 的開源 UI 組件庫,主要服務于 PC 界面的中后臺產(chǎn)品。這篇文章主要介紹了在vue項目中引用Iview的方法,需要的朋友可以參考下
    2018-09-09
  • 解析Vue.js中的組件

    解析Vue.js中的組件

    組件(Component)是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件,需要的朋友參考下
    2018-02-02
  • 使用FileReader API創(chuàng)建Vue文件閱讀器組件

    使用FileReader API創(chuàng)建Vue文件閱讀器組件

    這篇文章主要介紹了使用FileReader API創(chuàng)建一個Vue的文件閱讀器組件,需要的朋友可以參考下
    2018-04-04
  • Vue仿百度搜索功能

    Vue仿百度搜索功能

    這篇文章主要為大家詳細介紹了Vue仿百度搜索功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • vue?實現(xiàn)動態(tài)設置元素的高度

    vue?實現(xiàn)動態(tài)設置元素的高度

    這篇文章主要介紹了在vue中實現(xiàn)動態(tài)設置元素的高度,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue2.0使用swiper組件實現(xiàn)輪播的示例代碼

    vue2.0使用swiper組件實現(xiàn)輪播的示例代碼

    下面小編就為大家分享一篇vue2.0使用swiper組件實現(xiàn)輪播的示例代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue使用video插件vue-video-player詳解

    vue使用video插件vue-video-player詳解

    這篇文章主要為大家詳細介紹了vue使用video插件vue-video-player,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • Vue突然報錯doesn‘t?work?properly?without?JavaScript?enabled的解決方法

    Vue突然報錯doesn‘t?work?properly?without?JavaScript?enabled

    最近在做項目的時候遇到了些問題,所以這篇文章主要給大家介紹了關于Vue突然報錯doesn‘t?work?properly?without?JavaScript?enabled的解決方法,需要的朋友可以參考下
    2023-01-01

最新評論