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中定义。

 

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/16757076.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！