vue3中注册全局组件

1.首先封装好要注册到全局的组件

路径：src/components/SvgIcon/index.vue

<!--  -->
<template>
  <div>
    <svg :style="{ width, height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const state = reactive({})
console.log(state)
defineProps({
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: String,
  color: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '16px',
  },
  height: {
    type: String,
    default: '16px',
  },
})
</script>
<style lang="scss" scoped></style>

此时可以再main.ts中引入这个组件，并使用app.compontent()全局注册这个组件 ，但是为了方便起见，可以将需要全局注册的组件先集中挂载到app上面；见步骤2

2.在index.ts中挂载要全局注册的组件

路径src/components/index.ts

import SvgIcon from './SvgIcon/index.vue'
import type { App, Component } from 'vue'
const components: { [name: string]: Component } = { SvgIcon }
export default {
  install(app: App) {
    Object.keys(components).forEach((key: string) => {
      app.component(key, components[key])
    })
  },
}

3.在main.ts中引入

import globalComponent from '@/components/index'
app.use(globalComponent)

完成上述步骤，全局组件就注册完毕了。