Definition of vue2 global components

import ScreenFull from '@/components/FUllScreen'
// Use plugins
const MyPlugin = {
  install(Vue) {
    Vue.component(PageTool.name, PageTool)
    // console.log(' plug-in registration, call install, passed as argument ', Vue)
    // Add this functionality to the prototype of Vue's constructor
    // Add global filter, component,
    Vue.component(ScreenFull.name, ScreenFull)
  }
}
export default MyPlugin
Copy the code

The main. In js:

import MyPlugin from '@/plugin'
Vue.use(MyPlugin)
Copy the code

Vue3 global component definition

import XtxCarousel from './xtx-carousel.vue'

const myPlugin = {
  install (app) {
    // app is an instance of vue
    // app.component.component.component.component.component.component.object
    app.component(XtxCarousel.name, XtxCarousel)
  }
}

export default myPlugin
Copy the code

In the main. In js:

// Import global components
import myPlugin from '@/components/index'

createApp(App).use(store).use(router).use(myPlugin).mount('#app')
Copy the code

Conclusion:

Both are implemented by calling the install method,

Vue2 is called with a parameter to the vue constructor, which mounts the component to the prototype chain of vue.

Vue3 is called with a new instance of vue

Call the Component method in the same way, passing two arguments, the first component name and the second component object

In the main. In js:

Both use.use() to mount components for global use