Registering global components

Vue3 Global component registration:


1.Import the encapsulated global component addressimportComponent namefrom '/ address' // SRC /components

2.exportexports default{
    install (app) {
    // The parameter is the Vue instance automatically passed in by the use() method in main.js
        app.component('Custom component name, preferably the same as the name in the component', component name)}}3.Main.js to the Vue instanceimport { createApp } from 'vue'
import App from './App.vue' // Vue3 introduces Vue instance mode

import component from './components'// Introduce common components
// Chain add a.use(Component) item to introduce configured public components
createApp(App).use(component).mount('#app')
4.Use < custom component name />Copy the code

Vue2 Global component registration mode:

1.Import the encapsulated global component addressimportComponent namefrom '/ address' 
import Vue from 'vue'

2.exportconst component = {
    install (Vue) {
        // The parameter is the Vue instance automatically passed in by the use() method in main.js
        Vue.component('Custom component name, preferably the same as the name in the component', component name)}}// Globally register components
Vue.use(component)

3.+ is introduced in main.jsimport './components'// Introduce common components

4.Use < custom component name />Copy the code

There is not much difference between the two methods by comparison

Custom instruction

Similar to registering global components

1.Create a file and export the configurationexport default {
    install(app){
        app.directive('Custom directive name', {// Do not use v- when creating custom names
            mounted(el,binding){
                // EL is a DOM node with a custom instruction
                // binding is the parameter carried after the instruction. ValueFunction}})}}2.In the main.js fileimport direction from './directives'
createApp(App).use(directive).mount('#app')
3.Global use of <div v- custom directive name ='... '></div> 
Copy the code