快捷導(dǎo)航

vue引入組件的幾種方法匯總

更新時(shí)間：2023年10月10日 10:55:00 作者：鄭建007

這篇文章主要介紹了vue引入組件的幾種方法匯總,包括常用的局部引入,這里需要注意在哪個(gè)頁(yè)面需要就在那個(gè)頁(yè)面引入、注冊(cè)、使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

一、常用的局部引入

<template>
    <div>
        <!--3.使用組件-->
        <Button></Button>
    </div>
</template>
<script>
 // 1. 引入組件
import Button from '../view/button.vue'
export default {
    // 2. 注冊(cè)組件
    components: {
        Button,
    }
}
</script>

總結(jié)： 在哪個(gè)頁(yè)面需要就在那個(gè)頁(yè)面引入、注冊(cè)、使用

二、創(chuàng)建一個(gè)js 進(jìn)行統(tǒng)一注冊(cè) 然后在main.js引入統(tǒng)一管理的js文件實(shí)現(xiàn)全局注冊(cè)

1、global.js統(tǒng)一注冊(cè)管理：

// 1.引入vue
import Vue from 'vue'
import  Child1 from './child1'
import  Child2 from './child1'
import  Child3 from './child1'
import  Child4 from './child1'
import  Child5 from './child1'
Vue.component(Child1)
Vue.component(Child2)
Vue.component(Child3)
Vue.component(Child4)
Vue.component(Child5)

2、在main.js中引入 global.js實(shí)現(xiàn)全局注冊(cè)

優(yōu)點(diǎn)： 減少每個(gè)頁(yè)面引入的繁瑣步驟、減少了每一頁(yè)面重復(fù)引入的代碼，

缺點(diǎn)： 有90%的代碼都是重復(fù)的

三、自動(dòng)注冊(cè)全局引入

注釋版：

// 引入vue
import Vue from 'vue'
// 將字符串首字母大寫  返回當(dāng)前字符串
function changeStr(str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
}
// require.context: 是動(dòng)態(tài)引入文件
// 參數(shù)一: 當(dāng)前路徑（引入.vue文件的當(dāng)前路徑）
// 參數(shù)二：是否匹配當(dāng)前文件下的子文件
// 參數(shù)三：查找文件格式以.vue結(jié)尾的文件
const requireComponent = require.context('./', false, /\.vue$/)
console.log("批量注冊(cè)組件", requireComponent.keys())  // ['./head-l.vue', './head-r.vue', './head.vue']
requireComponent.keys().forEach(fileName => {
	// 當(dāng)前組件
    const config = requireComponent(fileName)
	console.log("組件的信息config", config)
	//獲取組件名
	const componentName = changeStr(fileName.replace(/^\.\//, '').replace(/\.\w+$/))  // 第一個(gè)replace(/^\.\//, '')去掉前面的./   第二個(gè)replace(/\.W+$/)是去掉后面的.vue
	console.log("組件名", componentName)  // 例如：Head-rundefined
	// 參數(shù)一： 組件名
	// 參數(shù)二： config：是一整個(gè)組件的內(nèi)容；  config.default：是組件中export.default里面的內(nèi)容  
	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)
})

結(jié)構(gòu)：