全局注册和局部注册

在 Vue 3 中，你可以选择全局注册或局部注册组件。这两种方法各有优缺点，适用于不同的场景。

全局注册

全局注册的组件可以在应用的任何地方使用，不需要在每个使用它的组件中单独导入。这使得全局注册非常适合那些在整个应用中频繁使用的组件，比如按钮、输入框等基础 UI 组件。

步骤

创建组件：首先创建你要注册的组件。
全局注册：在主文件（通常是 `main.js` 或 `main.ts`）中使用 `app.component` 方法进行全局注册。

示例

假设你有一个 `Button` 组件 Button.vue ：

javascript 复制代码

<template>
  <button class="custom-button">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'CustomButton'
}
</script>

<style scoped>
.custom-button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

main.js

javascript 复制代码

import { createApp } from 'vue';
import App from './App.vue';
import CustomButton from './components/Button.vue';

const app = createApp(App);

// 全局注册 CustomButton 组件
app.component('CustomButton', CustomButton);

app.mount('#app');

现在可以在任何 Vue 组件中使用 `<CustomButton>` 标签：

其他组件.vue

javascript 复制代码

<template>
  <div>
    <CustomButton>点击我</CustomButton>
  </div>
</template>

<script>
export default {
  name: 'SomeComponent'
}
</script>

局部注册

局部注册的组件只能在声明它的组件中使用。这种方法更适合那些只在特定组件中使用的组件，可以避免全局命名空间的污染。
步骤

创建组件：首先创建你要注册的组件。
局部注册：在使用该组件的父组件中通过 `components` 选项进行局部注册。

示例

假设你有一个 `Card` 组件：Card.vue

javascript 复制代码

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'CustomCard'
}
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}
</style>

其他组件

javascript 复制代码

<template>
  <div>
    <CustomCard>
      <h3>标题</h3>
      <p>内容</p>
    </CustomCard>
  </div>
</template>

<script>
import CustomCard from './components/Card.vue';

export default {
  name: 'SomeComponent',
  components: {
    CustomCard
  }
}
</script>

优缺点
全局注册

优点：

一次注册，到处可用。

适合基础 UI 组件，减少重复代码。

缺点：

可能会导致全局命名空间污染。

需要小心管理全局组件的版本和更新。

局部注册

优点：

更加灵活，避免全局命名空间污染。

适合特定组件中使用的组件。

缺点：

每次使用都需要导入和注册，代码量稍多。

可能会有重复的导入和注册代码。

总结

全局注册 适合基础 UI 组件，可以减少重复代码，提高开发效率。
局部注册适合特定组件中使用的组件，可以避免全局命名空间污染，保持代码的清晰和模块化。