vue引入組件的幾種方法代碼示例
一、常用的局部引入
<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'
// 將字符串首字母大寫(xiě) 返回當(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):

附:vue 中 import引入相同的方法名稱解決方法
import { list } from '@/api/aaaa/apiJs'
import { list} from '@/api/bbb/apiJs'當(dāng)引入了2個(gè)不同的文件,方法名稱list都是一樣的,就會(huì)出現(xiàn)報(bào)錯(cuò)。
如果之前文件用的地方比較多,直接改名稱的話,可能會(huì)漏掉,會(huì)引起不必要的麻煩,那如何解決呢
解決方法:
import { list } from '@/api/aaaa/apiJs'
import { list as _list} from '@/api/bbb/apiJs'就是使用 import as
as后面的名字就是你要替換的名稱,是不是很簡(jiǎn)單就解決了
總結(jié)
到此這篇關(guān)于vue引入組件的幾種方法的文章就介紹到這了,更多相關(guān)vue引入組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue左側(cè)菜單,樹(shù)形圖遞歸實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左側(cè)菜單,樹(shù)形圖遞歸實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
Vue draggable實(shí)現(xiàn)從左到右拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue draggable實(shí)現(xiàn)從左到右拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問(wèn)題
本篇文章主要介紹了vue2.x中請(qǐng)求之前數(shù)據(jù)顯示以及vuex緩存的問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí),具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-03-03
基于Vue3實(shí)現(xiàn)一個(gè)小相冊(cè)詳解
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)小相冊(cè)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
vue3+echarts+折線投影(陰影)效果的實(shí)現(xiàn)
這篇文章主要介紹了vue3+echarts+折線投影(陰影)效果的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解使用element-ui table組件的篩選功能的一個(gè)小坑
在element ui 框架中,對(duì)于table框架,有一個(gè)篩選功能,這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個(gè)小坑,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-11
vue,uniapp--js禁止頁(yè)面滾動(dòng),取消滾動(dòng)方式
這篇文章主要介紹了vue,uniapp--js禁止頁(yè)面滾動(dòng),取消滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
詳解vue-cli 腳手架項(xiàng)目-package.json
本篇文章主要介紹了詳解vue-cli 腳手架項(xiàng)目-package.json,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07

