vue如何動態(tài)加載組件詳解

更新時間：2022年10月19日 16:12:25 作者：夜叔

組件是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關于vue如何動態(tài)加載組件的相關資料,需要的朋友可以參考下

使用場景：

項目中需要我們根據不同的業(yè)務需求呈現(xiàn)不同的業(yè)務場景，如果業(yè)務類型簡單還好，直接全部引入判斷即可，但隨著我們代碼的沉積，項目將會變得很難維護，這時候我們可以使用動態(tài)引入組件的方式來避免這個問題，首先第一步實現(xiàn)就是，在vue中，我們如何動態(tài)引入組件？

話不多說，直接上干貨

需要動態(tài)導入組件的頁面

在這個頁面引入我們的組件Test

<template>
  <div>
    <Test :data="DemoData"
          :type="type" />
  </div>
</template>
<script>
/** @format */
import Test from '@components/demo/index.vue'
export default {
  components: {
    Test
  },
  data() {
    return {
      type: 'demo2',
      DemoData: 'demoData'
    }
  },

}
</script>

組件庫文件夾格式根據自己的喜好來設置

核心組件的代碼：

<template>
  <component :is="component"
             v-if="component" />
</template>
<script>
/** @format */

export default {
  name: 'test',
  props: ['data', 'type'],

  data() {
    return {
      component: null
    }
  },
  computed: {
    loader() {
      return () => import(`@components/demo/demoTemplates/${type}`)
    }
  },
  mounted() {
    this.loader()
      .then(() => {
        this.component = () => this.loader()
      })
      .catch(() => {
        this.component = () =>
          import('@components/demo/demoTemplates/defaultDemo')
      })
  }
}
</script>

這樣就可以動態(tài)加載組件了

利用的原理知識是es6新增的inport()函數

ES2020提案引入import()函數，支持動態(tài)加載模塊。

import()返回一個 Promise 對象。下面是一個例子。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()函數可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。它是運行時執(zhí)行，也就是說，什么時候運行到這一句，就會加載指定的模塊。另外，import()函數與所加載的模塊沒有靜態(tài)連接關系，這點也是與import語句不相同。import()類似于 Node 的require方法，區(qū)別主要是前者是異步加載，后者是同步加載。

使用場景：

（1）按需加載。

import()可以在需要的時候，再加載某個模塊。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

上面代碼中，import()方法放在click事件的監(jiān)聽函數之中，只有用戶點擊了按鈕，才會加載這個模塊。

動態(tài)的模塊路徑

import()允許模塊路徑動態(tài)生成。

import(f())
.then(...);

上面代碼中，根據函數f的返回結果，加載不同的模塊。

注意點：

import()加載模塊成功以后，這個模塊會作為一個對象，當作then方法的參數。因此，可以使用對象解構賦值的語法，獲取輸出接口。

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

上面代碼中，export1和export2都是myModule.js的輸出接口，可以解構獲得。

如果模塊有default輸出接口，可以用參數直接獲得。

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

上面的代碼也可以使用具名輸入的形式。

import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

如果想同時加載多個模塊，可以采用下面的寫法。

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

import()也可以用在 async 函數之中。

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

import()方法詳細介紹參考：https://es6.ruanyifeng.com/#docs/module

總結

到此這篇關于vue如何動態(tài)加載組件的文章就介紹到這了,更多相關vue動態(tài)加載組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue2.0表單校驗組件vee-validate的使用詳解
本篇文章主要介紹了Vue2.0表單校驗組件vee-validate的使用詳解，詳細的介紹了vee-validate使用教程。具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
element ui table（表格）實現(xiàn)點擊一行展開功能
這篇文章主要給大家介紹了關于element ui table（表格）實現(xiàn)點擊一行展開功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-12-12
輕松學Vue組件之單文件組件
一個組件相當于是一個小模塊,它是html、css與js的集合體,可以用于描述頁面中的某個結構(模塊),下面這篇文章主要給大家介紹了關于輕松學Vue組件之單文件組件的相關資料,需要的朋友可以參考下
2023-03-03
vue.js-div滾動條隱藏但有滾動效果的實現(xiàn)方法
下面小編就為大家分享一篇vue.js-div滾動條隱藏但有滾動效果的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue2.0 資源文件assets和static的區(qū)別詳解
這篇文章主要介紹了vue2.0 資源文件assets和static的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
ElementPlus表格中的背景透明解決方案
最近寫大屏,用到elementplus中的el-table,為了讓顯示效果好看一點,需要把表格的白色背景調整為透明,與整個背景融為一體,本文給大家介紹ElementPlus表格中的背景透明解決方案,感興趣的朋友一起看看吧
2023-10-10
vue實現(xiàn)滾動條下滑時隱藏導航欄,上滑時顯示導航欄功能
這篇文章主要介紹了vue實現(xiàn)滾動條下滑時隱藏導航欄,上滑時顯示導航欄,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-07-07
解決ant Design中Select設置initialValue時的大坑
這篇文章主要介紹了解決ant Design中Select設置initialValue時的大坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能(推薦)
在elementui Input輸入框中可以找到遠程搜索組件，獲取服務端的數據。這篇文章主要給大家介紹Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能，感興趣的朋友一起看看吧
2019-10-10
vue+element表格實現(xiàn)多層數據的嵌套方式
這篇文章主要介紹了vue+element表格實現(xiàn)多層數據的嵌套方式，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09