Vue元件之全域性註冊
摘要：
前言: 在vue中對於一些複用性比較高的元件,為了避免頻繁的import...匯入操作,我們可以將其註冊為 全域性元件,下來呢,我們一起來搞點事情,對->盤它(註冊全域性元件).
先說明下,一共是兩種方式,我稱其為手動和自動方式,手動顧明思議就是emmm那種意思,大夥都懂,自...
前言: 在vue中對於一些複用性比較高的元件,為了避免頻繁的import...匯入操作,我們可以將其註冊為 全域性元件,下來呢,我們一起來搞點事情,對->盤它(註冊全域性元件).
- 先說明下,一共是兩種方式,我稱其為手動和自動方式,手動顧明思議就是emmm那種意思,大夥都懂,自動估計也懂.能用程式碼說明的我儘量在程式碼內bb,ok,擼起來!
基礎工作
- utils目錄下建立一個js檔案,這裡就命名為globalComponents.js.
- npm install --save lodash,裡面的某些處理函式需要用到,比較方便.
- components目錄下建立元件,這裡要被註冊為全域性的元件我都以Base作為字首命名.
<!--main.js檔案-->
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
//第三方庫
import _ from 'lodash'
Vue.use( _ )
//全域性元件
import GL_Component from '@/utils/globalComponents'
Vue.use(GL_Component);
Vue.config.productionTip = false
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
複製程式碼
方式1(手動註冊)
<!--globalComponents.js-->
//引入
import BaseComponentA from '@/components/BaseComponentA'
import BaseComponentB from '@/components/BaseComponentA'
function plugins (Vue) {
//註冊
Vue.component('BaseComponentA',BaseComponentA); //第一個引數:元件名稱,第二個引數:要註冊的元件
Vue.component('BaseComponentB',BaseComponentB);
}
export default plugins;
複製程式碼
或者
<!--globalComponents.js-->
//引入
import BaseComponentA from '@/components/BaseComponentA'
import BaseComponentB from '@/components/BaseComponentA'
const plugins = {
//註冊
install(Vue) {
Vue.component('BaseComponentA',BaseComponentA); //第一個引數:元件名稱,第二個引數:要註冊的元件
Vue.component('BaseComponentB',BaseComponentB);
}
}
export default plugins;
複製程式碼
然後main.js入口檔案中匯入globalComponents.js檔案Vue.use()即可.那麼在需要應用的元件中使用kebab-case在模板中直接引用就ok,最後我會貼出來圖,稍後.
方式2(自動註冊)
<!--globalComponents.js-->
const plugins = {
install(Vue) {
const requireComponent = require.context(
// 其元件目錄的相對路徑(元件目錄相對於當前js檔案的路徑)
'../components',
// 是否查詢其子目錄
false,
// 匹配基礎元件檔名的正則表示式(因此要註冊為全域性元件的元件名稱約定很重要)
/Base[A-Z]\w+\.(vue)$/
)
requireComponent.keys().forEach(fileName => {
//console.log(fileName)./BaseComponentA.vue
// 獲取元件配置
const componentConfig = requireComponent(fileName) //這裡的componentConfig包含當前fileName對應元件的所有該元件資訊,等於拿到了當前元件例項
// 獲取元件的 PascalCase 命名
const componentName = _.upperFirst( //這裡 _ 代表main.js中引入的的lodash例項物件
_.camelCase(
// 獲取和目錄深度無關的檔名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '') //將.(包括.)字元以後的字元用''代替
)
)
// 全域性註冊元件
Vue.component(
componentName,
// 如果這個元件選項是通過 `export default` 匯出的，
// 那麼就會優先使用 `.default`，
// 否則回退到使用模組的根。
componentConfig.default || componentConfig
)
})
}
}
export default plugins;
複製程式碼
元件中應用
以上就是vue中註冊全域性元件的方式了,雖然不是很難,但我還是想再多bb兩句,主要是一些建議(想法).
- 建議使用暴露install()方法的註冊方式,有疑問可以戳這裡.
- 元件的命名建議使用PascalCase(首字母大寫方式),模板中引用建議使用kebab-case(短橫槓連線方式).