Vue 3 中如何注册全局自定义组件：一个 SVG 图标的例子

Vue 3 中如何注册全局自定义组件：一个 SVG 图标的例子

嘿，小伙伴们！今天我们来聊一下在 Vue 3 中如何注册一个全局的自定义组件。我知道有时候我们想要重复使用某些组件，比如说 SVG 图标，但不想在每个地方都重新定义。那么，我们该怎么做呢？🤔

什么是全局组件？

全局组件就是不管你在哪里都可以直接使用的组件，无需在子组件中一次次地引入和注册。这就好像你在厨房做饭时，把盐和胡椒粉放在一个随手可拿的地方，总比每次使用都要去储物柜找要方便多了！🍴

将 SVG 图标封装成组件

首先，我们要为我们的 SVG 图标创建一个简单的组件。假设我们要使用如下的 SVG：

<svg>
  <use xlink:href="#icon-luxian" />
</svg>

我们想把它封装成一个组件 <svg-icon>，并可以传递一些参数，比如 name、color、width 和 height。下面就是我们的组件实现，在components中创建SvgIcon文件夹创建index.vue：

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

<script setup lang="ts">
defineProps({
  prefix: {
    type: String,
    default: '#icon-'
  },
  name: String,
  color: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: '100px'
  },
  height: {
    type: String,
    default: '100px'
  }
})
</script>

<style scoped></style>

这里我们使用 defineProps 来接受父组件传递的参数，比如 name 和 color。是不是很简单？😄

批量注册全局组件

接下来，我们要想办法批量注册这些全局组件。为此，我们在 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]);
        });
    }
}

这段代码创建了一个可以被 Vue 3 应用安装的插件。通过遍历 components 对象，我们能够把所有组件都注册为全局组件。

在入口文件中使用

最后，只需在你的 main.ts 文件中使用我们创建的插件：

import { createApp } from 'vue';
import App from './App.vue';
import globalComponent from '@/components';

const app = createApp(App);

app.use(globalComponent); // 自动执行 install 方法

app.mount('#app');

好了，这样我们就能在应用中的任何地方使用我们的 <svg-icon> 组件了，是不是超酷的😁？

结论

当你有一些通用的组件需要在多个页面中使用时，注册为全局组件无疑是一个非常不错的选择。这样不仅能让代码更加简洁，还能避免重复定义和使用可能导致的错误。