Vue.js框架:自定義組件全局掛載,避免每個用到的頁面需要重複導入問題

一、打包組件

  可以建立一個打包工具類,將所有的需要全局掛載的自定義組件進行打包封裝,避免main.js過於雜亂。

import gbInput from '../components/gbInput/gbInput'
//...

//自定義組件打包安裝類,引入main.js後全局掛載,避免每個用到的頁面重複引入
const pack = {
  install:function(Vue) {
    Vue.component('gb-input', gbInput)
    //...
  }
}

export default pack;

  通過import引入自定義組件,在vue的install方法中進行全局註冊

  該方法可以添加的類型如下:

export default {
    install(Vue,option){
        組件
        指令
        混入
        掛載vue原型
    }
}

  通過Vue.component('gb-input', gbInput)來進行掛載。

二、引入使用

  在main.js中引入打包的工具類,並進行使用:

import pack from "./utils/pack";

Vue.use(pack)

  這樣就可以直接在頁面中通過掛載時定義的組件名稱gb-input來使用gbInput組件了,無需每個頁面都import並在component中定義。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章