vue引入組件的幾種方法代碼示例
更新時(shí)間：2024年04月01日 10:32:57 作者：鄭建零零發(fā)
vue的一個(gè)強(qiáng)大功能就是組件化開發(fā),下面這篇文章主要給大家介紹了關(guān)于vue引入組件的幾種方法,文中給出了詳細(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è)頁面需要就在那個(gè)頁面引入、注冊(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è)頁面引入的繁瑣步驟 、減少了每一頁面重復(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)：
附：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)文章
由于一些演示需要對(duì)一些簡(jiǎn)單頁面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會(huì)進(jìn)行編譯,所以文件放在public,這篇文章主要給大家介紹了關(guān)于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下2024-02-02
vue前端框架vueuse的useScroll函數(shù)使用源碼分析
這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務(wù)場(chǎng)景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當(dāng)前選中的對(duì)象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue3使用vant檢索組件van-search遇到的問題小結(jié)
當(dāng)清空按鈕與檢索按鈕同時(shí)居右時(shí),點(diǎn)擊clear清空按鈕事件時(shí)會(huì)同時(shí)觸發(fā)click-right-icon事件,這個(gè)時(shí)候容易觸發(fā)一系列問題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問題小結(jié),感興趣的朋友一起看看吧2024-02-02
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決
這篇文章主要介紹了vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
今天在移動(dòng)端項(xiàng)目中遇見一個(gè)需求,需要數(shù)據(jù)無限滾動(dòng),所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無限滾動(dòng)指令的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
在Vue中實(shí)現(xiàn)深度監(jiān)聽的示例代碼
在 Vue 中,深度監(jiān)聽是指監(jiān)聽一個(gè)對(duì)象或數(shù)組的嵌套屬性（深層結(jié)構(gòu)）的變化,而不僅僅是監(jiān)聽頂層屬性的引用變化,本文給大家介紹了如何在Vue中實(shí)現(xiàn)深度監(jiān)聽,并通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03