Vue組件之全局註冊

前言: 在vue中對於一些複用性比較高的組件,爲了不頻繁的import...導入操做,咱們能夠將其註冊爲 全局組件,下來呢,咱們一塊兒來搞點事情,對->盤它(註冊全局組件).

• 先說明下,一共是兩種方式,我稱其爲手動和自動方式,手動顧明思議就是emmm那種意思,大夥都懂,自動估計也懂.能用代碼說明的我儘可能在代碼內bb,ok,擼起來!

基礎工做

1. utils目錄下建立一個js文件,這裏就命名爲globalComponents.js.
2. npm install --save lodash,裏面的某些處理函數須要用到,比較方便.
3. 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(短橫線分隔方式).

END

云爲車兮風爲馬，玉在山兮蘭在野。