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

vue頁(yè)面批量引入組件的操作代碼

 更新時(shí)間：2022年12月12日 14:50:10   作者：陌上煙雨寒  
這篇文章主要介紹了vue頁(yè)面批量引入組件,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(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() 方法會(huì)返回 path 的最后一部分。 尾部的目錄分隔符會(huì)被忽略。
    **/
    
  // 獲取文件名 法一
  // 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 />

知識(shí)點(diǎn)：

require.context(param1,param2,param3)
  • param1:路徑;
  • param2: 是否搜索子文件夾;
  • param3: 文件類型，可正則
path.basename(path[, ext])

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

  • path ：string
  • ext ：string 可選的文件擴(kuò)展名。
path.basename('/目錄1/目錄2/文件.html');  // 文件.html
path.basename('/目錄1/目錄2/文件.html', '.html');  // 文件

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

相關(guān)文章

最新評(píng)論