vue3组件的全局注册

全局注册

 1. 新建一个vue文件，即组件，

在组件中， 

//在sideBox.vue中，

2. 全局注册

在main.js中

//main.js
import { createApp } from 'vue'
import router from './route/index'
import App from './App.vue'
import ElementPlus from 'element-plus'
import sideBox from './components/sideBox.vue'    //组件name 来自哪个文件夹

/* 以下两种二选一 */
const app = createApp(App);
app.use(ElementPlus)
app.use(router)
app.mount('#app')
//组件全局注册: app.component('组件名 用其调用 短横线分割命名',组件对象 name 首字母大写命名)
app.component('side-box',sideBox) 

//createApp(App).use(ElementPlus).use(router).component('side-box',sideBox).mount('#app')

备注：app.component(‘自定义元素的名字’，组件的选项对象name)，

由组件注册 | Vue.js (vuejs.org)文档可知，如下命名定义：

 

3. 调用组件

用<组件名>在html中直接调用

参考：

https://blog.csdn.net/qq_39115469/article/details/116672986

https://blog.csdn.net/qq_42204414/article/details/115249502