(21/05/21) 使用Vue.use注册全局组件

一、Vue.use

它是Vue提供一个静态方法，用来向Vue注册插件。Vue.use文档

背景: 在业务开发中，经常会用到重复页面结构，我们可作为公共组件进行封装，方便复用。

目标: 封装注册全局组件，在其他页面中，均可以直接使用。

• 方式1. 在min.js中注册使用。

import PageTools from './components/PageTools' // 1. 导入
const MyPlugin = {
	install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}
Vue.use(MyPlugin)

• 方式2. 提供统一注册的入口文件

1. src/componets/index.js

import PageTools from './PageTools'
export default {
  install(Vue) {
    
    Vue.component('PageTools', PageTools)
  }
}

2. 在main.js中注册插件

import Components from './components'
Vue.use(Components)

二 、vue3x 全局注册组件

1. 以插件的形式注册为全局可用

components/index.js

import Skeleton from './Skeleton/index.vue' // 引入需要全局注册的文件

export default {
  install (app) {
    app.component('Skeleton', Skeleton)
  }
}

main.js

import components from '@/components'
createApp(App).use(store).use(router).use(components).mount('#app')

最后

以上就是潇洒镜子为你收集整理的(21/05/21) 使用Vue.use注册全局组件的全部内容，希望文章能够帮你解决(21/05/21) 使用Vue.use注册全局组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。