快捷導(dǎo)航

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

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

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

使用場景：

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

話不多說，直接上干貨

需要?jiǎng)討B(tài)導(dǎo)入組件的頁面

在這個(gè)頁面引入我們的組件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>

組件庫文件夾格式根據(jù)自己的喜好來設(shè)置

核心組件的代碼：

<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>

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

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

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

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

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

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

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

使用場景：

（1）按需加載。

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

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

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

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

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

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

上面代碼中，根據(jù)函數(shù)f的返回結(jié)果，加載不同的模塊。

注意點(diǎn)：

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

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

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

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

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

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

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

如果想同時(shí)加載多個(gè)模塊，可以采用下面的寫法。

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

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

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()方法詳細(xì)介紹參考：https://es6.ruanyifeng.com/#docs/module