vue自定义全局组件

1.创建一个组件文件夹内新建一个.vue和.js文件

2..vue组件中就是组件的内容，.js文件中使用install方法将组件注册为全局eg:下图

import scrollDiv from './scrollDiv'
const defaultComponentName = 'scrollDiv'

const scrollDivBox = {
    install(Vue, options = {}) {
        const componentName = options.componentName || defaultComponentName //提供可选的组件名
        Vue.component(componentName, scrollDiv)
    }
}
export default scrollDivBox

3.在入口文件一般为main.js文件中进行组件的全局引入

import scrollDiv from '@/components/scrollDiv'
Vue.use(scrollDiv)

4.在其它组件中引入该全局组件

<scroll-div></scroll-div>

5.一般情况下，上诉所说就大功告成了。但一般有些其它组件中根据不同需要包含不同内容，这时候就只需要对上诉进行微小的改动即可放入不同的内容。

<scroll-div>
   <slot></slot>
</scroll-div>

6.好了，从此你就可以愉快的使用这个全局组件中间放入不同的内容啦。

 

注意：只是记录和分享下，有些借鉴了大牛们的代码，在此特别的感谢哦！如果有需要补充的部分，小伙伴们尽管私信我哈。