六. 3、vue3 + ts 批量注册全局组件

注册全局组件的方法，可直接在组件中使用，无需引入！

1、新建存放全局组件插件的文件：src/components/SvgIcon/index.vue

<template>
  <!-- svg:图标外层容器借点,内部需要与use 标签结合使用 -->
  <svg :style="{ width: width, height: height }">
    <!-- xlink:href 执行的图标属性需为 #icon-图标名称 -->
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-',
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: '',
  },
  //svg宽度
  width: {
    type: String,
    default: '20px',
  },
  //svg高度
  height: {
    type: String,
    default: '20px',
  },
})
</script>
<style scoped></style>

2、配置全局ts代码：src/components/index.ts

// 引入全局组件
import SvgIcon from '@/components/SvgIcon/src/Icon.vue' // svg图标
import Pagination from '@/components/Pagination/index.vue' // 分页器
// 全局对象
const allGloablComponent: any = { SvgIcon, Pagination}

const global = {
  // 函数名必须为install
  install(app: any) {
    // 注册项目全部全局组件
    Object.keys(allGloablComponent).forEach((key) => {
      // 注册组件为全局组件
      app.component(key, allGloablComponent[key])
    })
  },
}

export const setupGlobal = (app: any) => {
  app.use(global)
}

3、在main.ts中加入以下代码

// 全局组件
import { setupGlobal } from '@/components'

// 创建实例
const setupAll = async () => {
  const app = createApp(App)
  await   setupGlobal(app)
  app.mount('#app')
}

setupAll()

4、页面中使用：若有参数，传入指定参数即可。

5、页面显示