美文网首页
vue一次倒入多个组件

vue一次倒入多个组件

作者: HTAO濤 | 来源:发表于2021-03-22 08:43 被阅读0次

1.require.context()

1.场景:如页面需要导入多个组件,原始写法:

import titleCom from '@/components/home/titleCom'

import bannerCom from '@/components/home/bannerCom'

import cellCom from '@/components/home/cellCom'

components:{titleCom,bannerCom,cellCom}

2.这样就写了大量重复的代码,利用 require.context 可以写成

const path = require('path')

const files = require.context('@/components/home', false, /\.vue$/)

const modules = {}

files.keys().forEach(key => {

  const name = path.basename(key, '.vue')

  modules[name] = files(key).default || files(key)

})

components:modules

这样不管页面引入多少组件,都可以使用这个方法

3.API 方法

实际上是 webpack 的方法,vue 工程一般基于 webpack,所以可以使用

require.context(directory,useSubdirectories,regExp)

接收三个参数:

directory:说明需要检索的目录

useSubdirectories:是否检索子目录

regExp: 匹配文件的正则表达式,一般是文件名

相关文章

  • vue一次倒入多个组件

    1.require.context() 1.场景:如页面需要导入多个组件,原始写法: import titleCo...

  • Vue中多个元素或组件的过渡

    Vue中多个元素的过渡 Vue中多个组件的过渡(通过动态组件实现组件的过渡动画效果)image.png

  • 【Vue】组件 - 插槽默认值

    基础知识 【Vue】组件 - 插槽的基本用法 【Vue】组件 - 多个插槽 子组件里,在 里写上默认的内容。 在父...

  • 组件化开发

    一、全局组件和局部组件 全局组件:即可以在多个Vue实例中使用 局部组件:只能在当前Vue实例中使用 使用:在Vu...

  • Vue组件data为什么必须是个函数而Vue的根实例则没有此限制

    1,Vue的组件的 data 选项如果没有设置成函数,会导致程序无法通过 vue 的检测2.Vue组件可能存在多个...

  • 【Vue】组件 - 多个插槽

    准备知识:【Vue】组件 - 插槽的基本用法 插槽除了有上面这种玩法之外,还可以通过关键字来指定。 在父级调用子组...

  • 9道vue面试题

    2.VUE组件data为什么必须是函数 答:Vue组件可能存在多个实例,如果使用对象形式定义data,则会导致它们...

  • Vue.js第2课-基础

    一、Vue.js 实例 一个 Vue.js 的项目,是由很多个组件组成的,Vue.js 组件也是一个实例,也可以说...

  • 学习 Vue3.0 (3)

    Fragment 在 Vue 2 中,组件必须有一个根标签 在 Vue 3 中,组件可以没有根标签,内部会将多个标...

  • 2018-09-22 vue组件

    全局: 局部: 组件中可以写多个component 组件中可以正常使用vue中的指令 props是组件间的桥梁 子...

网友评论

      本文标题:vue一次倒入多个组件

      本文链接:https://www.haomeiwen.com/subject/bvoacltx.html