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è)頁面需要就在那個(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)文章
vue左側(cè)菜單,樹形圖遞歸實(shí)現(xiàn)代碼
這篇文章主要介紹了vue左側(cè)菜單,樹形圖遞歸實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08Vue draggable實(shí)現(xiàn)從左到右拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue draggable實(shí)現(xiàn)從左到右拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問題
本篇文章主要介紹了vue2.x中請(qǐng)求之前數(shù)據(jù)顯示以及vuex緩存的問題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí),具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-03-03基于Vue3實(shí)現(xiàn)一個(gè)小相冊(cè)詳解
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)小相冊(cè)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12vue3+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-11vue,uniapp--js禁止頁面滾動(dòng),取消滾動(dòng)方式
這篇文章主要介紹了vue,uniapp--js禁止頁面滾動(dòng),取消滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05詳解vue-cli 腳手架項(xiàng)目-package.json
本篇文章主要介紹了詳解vue-cli 腳手架項(xiàng)目-package.json,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07