vue3自定义全局组件

创建一个footer组件

<template>
  <footer>
    <slot></slot>
  </footer>
</template>
<script>
export default {
    name: 'CFooter'
}
</script>

导出footer组件

import Footer from './footer.vue'
export {Footer};

封装引入方法

// 1.导入自定义公用组件
import {Header, Aside, Content, Footer} from './layout';
const components = {
    Layout, Header, Aside, Content, Footer
};
const install = (app) => { // 核心要定义一个install方法
  Object.keys(components).forEach(key => {
   app.component(components[key]['name'], components[key])
  });
};
const yyhUI = {
  install
};
export default yyhUI;

在main.js中注册

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