Vue元件之全域性註冊

Stone_hu發表於2019-05-02
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元件之全域性註冊

以上就是vue中註冊全域性元件的方式了,雖然不是很難,但我還是想再多bb兩句,主要是一些建議(想法).

  • 建議使用暴露install()方法的註冊方式,有疑問可以戳這裡.
  • 元件的命名建議使用PascalCase(首字母大寫方式),模板中引用建議使用kebab-case(短橫線分隔方式).

END

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

相關文章