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.好了,从此你就可以愉快的使用这个全局组件中间放入不同的内容啦。
注意:只是记录和分享下,有些借鉴了大牛们的代码,在此特别的感谢哦!如果有需要补充的部分,小伙伴们尽管私信我哈。