快捷導(dǎo)航

vue頁面批量引入組件的操作代碼

更新時間：2022年12月12日 14:50:10 作者：陌上煙雨寒

這篇文章主要介紹了vue頁面批量引入組件,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

<template>
  <div>
    <template v-for="(item) in names">
      <component :is="item" :key="item" />
    </template>
  </div>
</template>
<script>
// 可行了
import path from 'path'

// require.context(param1,param2,param3) param1:路徑;  param2: 是否搜索子文件夾;  param3: 文件類型，可正則
const files = require.context('@/components/Menu/Dialog', true, /\.vue$/)

const dialogs = {}
const names = []
// 組件導(dǎo)入
files.keys().forEach((key) => {
   /**
    * 
    * 獲取vue文件名
    * 法一：用正則表達(dá)式匹配 
    * key.replace(/^\.\/(.*)\.\w+$/, '$1')
    * 法一：path.basename獲取vue文件名
    * import path from 'path'  
    * path.basename(path[, ext])
	* path.basename() 方法會返回 path 的最后一部分。 尾部的目錄分隔符會被忽略。
    **/
    
  // 獲取文件名 法一
  // var name = fileName
  //  .split('/')
  //  .pop()
  //  .replace(/\.\w+$/, '');

  // 獲取文件名 法二
  const name = path.basename(key, '.vue')
  
  names.push(name)
  dialogs[name] = files(key).default || files(key)
})

export default {
  name: 'Dialogs',
  components: dialogs,
  data() {
    return {
      names: names
    }
  }
}
</script>

<style lang="scss" scoped />

知識點(diǎn)：

require.context(param1,param2,param3)

param1:路徑;
param2: 是否搜索子文件夾;
param3: 文件類型，可正則

path.basename(path[, ext])

方法會返回 path 的最后一部分。尾部的目錄分隔符會被忽略

path ：string
ext ：string 可選的文件擴(kuò)展名。

path.basename('/目錄1/目錄2/文件.html');  // 文件.html

path.basename('/目錄1/目錄2/文件.html', '.html');  // 文件

到此這篇關(guān)于vue頁面批量引入組件的文章就介紹到這了,更多相關(guān)vue頁面批量引入組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue自定義filters過濾器
這篇文章主要介紹了vue自定義filters過濾器的相關(guān)知識，非常不錯，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-04-04
vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)卡片翻轉(zhuǎn)輪播展示，同時在翻轉(zhuǎn)時切換數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
Vue mixins混入使用解析
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
2023-02-02
antd多選下拉框一行展示的實(shí)現(xiàn)方式
這篇文章主要介紹了antd多選下拉框一行展示的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue template中slot-scope/scope的使用方法
今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue實(shí)現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
這篇文章主要介紹了vue實(shí)現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue實(shí)現(xiàn)簡單loading進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單loading進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06
基于vue v-for 多層循環(huán)嵌套獲取行數(shù)的方法
今天小編就為大家分享一篇基于vue v-for 多層循環(huán)嵌套獲取行數(shù)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vuex入門之Module使用詳解
這篇文章主要介紹了Vuex入門之Module使用詳解,由于使用單一狀態(tài)樹,應(yīng)用的所有狀態(tài)會集中到一個比較大的對象,當(dāng)應(yīng)用變得非常復(fù)雜時,store?對象就有可能變得相當(dāng)臃腫,需要的朋友可以參考下
2023-11-11
解決vuex數(shù)據(jù)丟失問題
本文主要介紹了解決vuex?數(shù)據(jù)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02