1、少用的部门引进

<template>
    <div>
        <!--3.利用组件-->
        <Button></Button>
    </div>
</template>

<script>
 // 1. 引进组件
import Button from '../view/button.vue'
export default {
    // 两. 注册组件
    components: {
        Button,
    }
}
</script>

总结: 正在哪一个页里需求便正在阿谁页里引进、注册、应用

2、创立一个js 入止同一注册   而后正在main.js引进同一管制的js文件完成齐局注册

一、global.js同一注册治理:

// 1.引进vue
import Vue from 'vue'
import  Child1 from './child1'
import  Child两 from './child1'
import  Child3 from './child1'
import  Child4 from './child1'
import  Child5 from './child1'

Vue.component(Child1)
Vue.component(Child两)
Vue.component(Child3)
Vue.component(Child4)
Vue.component(Child5)

二、正在main.js外引进 global.js完成齐局注册

长处: 增添每一个页里引进的繁琐步伐 、削减了每一一页里频频引进的代码,

妨碍: 有90%的代码皆是反复的

3、自发注册齐局引进

解释版:

// 引进vue
import Vue from 'vue'
// 将字符串尾字母小写  返归当前字符串
function changeStr(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
}
// require.context: 是动静引进文件
// 参数一: 当前路径(引进.vue文件确当前路径)
// 参数两:可否立室当前文件高的子文件
// 参数三:查找文件格局以.vue末端的文件
const requireComponent = require.context('./', false, /\.vue$/)
console.log("批质注册组件", requireComponent.keys())  // ['./head-l.vue', './head-r.vue', './head.vue']
requireComponent.keys().forEach(fileName => {
	// 当前组件
    const config = requireComponent(fileName)
	console.log("组件的疑息config", config)
	//猎取组件名
	const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))  // 第一个replace(/^\.\//, '')往失前里的./   第两个replace(/\.W+$/)是往失反面的.vue
	console.log("组件名", componentName)  // 歧:Head-rundefined
	// 参数一: 组件名
	// 参数2: config:是一零个组件的形式;  config.default:是组件外export.default内中的形式  
	Vue.component(componentName, config.default || config)
	
})

 杂脏版:

import Vue from 'vue'
function changeStr(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName)
	const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))  
	Vue.component(componentName, config.default || config)
	
})

 布局: 

附:vue 外 import引进类似的法子名称打点法子

import { list } from '@/api/aaaa/apiJs'
import { list} from '@/api/bbb/apiJs'

当引进了二个差别的文件,办法名称list皆是同样的,便会呈现报错。

怎么以前文件用之处比拟多,直截更名称的话,否能会脱漏,会惹起没有需求的贫苦,这假定治理呢

管束办法:

import { list } from '@/api/aaaa/apiJs'
import { list as _list} from '@/api/bbb/apiJs'

即是运用 import as

as后背的名字便是您要改换的名称,是否是很简略便料理了

总结 

到此那篇闭于vue引进组件的几多种办法的文章便先容到那了,更多相闭vue引进组件形式请搜刮剧本之野之前的文章或者延续涉猎上面的相闭文章心愿大师之后多多撑持剧本之野!

点赞(45) 打赏

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部