vue3组件的全局注册

全局注册

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

在组件中， 

//在sideBox.vue中，
<template>
    <div class="sideStyle">
        组件内容
    </div>
    nihaoya
</template>

<script>
    export default{
        name:'sideBox',  //选项对象
        setUp(){
            let msg = '自定义插件';

            return{
                msg
            }
        }
    }
</script>

<style scoped>
*{
    margin: 0;
}
.sideStyle{
  
}
</style>

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中直接调用

  <!-- 自定义全局组件 -->
  <side-box></side-box>

参考：

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

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