vue引入组件的几种方法代码示例

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

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

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

// 引进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)
	
})

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

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