vue3组件注册

220次阅读  |  发布于2月以前

注册

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

1. 全局注册组件：

在 Vue 3 中，可以使用createApp方法创建一个应用实例，并使用其component方法全局注册组件。全局注册的组件可以在整个应用中的任何地方使用。

// 创建一个 Vue 应用实例
const app = createApp({/* options */});

// 全局注册一个组件
app.component('my-component', {
  // 组件的选项
});

// 挂载应用
app.mount('#app');

2. 局部注册组件：

局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  },
  // 其他组件选项
};
</script>

使用<script setup>语法糖使用局部组件，只需要引用之后直接使用就行。不需要注册。

3. 使用组合式 API 注册组件：

在 Vue 3 中，还可以使用组合式 API 注册组件。这是一种相对新的 API 风格，可以更灵活的方式组织组件逻辑。

import { defineComponent } from 'vue';

const MyComponent = defineComponent({
  // 组件选项
});

const app = createApp({
  components: {
    'my-component': MyComponent
  },
  // 其他组件选项
});

app.mount('#app');

4. 自动全局注册：

也可以通过自动全局注册的方式，将components目录下的所有组件自动注册为全局组件。这需要在应用初始化时使用require.context。


const app = createApp({/* options */});

const files = require.context('./components', false, /\.vue$/);

files.keys().forEach(key => {
  const componentConfig = files(key);
  const componentName = key.split('/').pop().split('.')[0];
  app.component(componentName, componentConfig.default || componentConfig);
});

app.mount('#app');

注意

全局注册组件可能会引发类似的问题，不管是普通的全局组件还是通过 <script setup> 语法糖。下面是一些注意事项：

  1. 未使用的组件无法被自动移除：
  1. 依赖关系不够明确：
  1. 全局注册过多可能导致性能问题：

对于这些问题，可以考虑一些优化方式：

公共组件

一般项目里有个公共的components一个专门的文件夹（通常称为components）中存放所有的组件，并在需要的地方进行引用，而不是通过全局注册。这种做法可以更好地组织和管理组件。

这种方式有一些优势：

  1. 模块化组织： 将所有组件放在一个专门的文件夹中，有助于模块化地组织你的应用。每个组件都可以有自己的文件，便于查找和维护。
  2. 避免全局注册的缺点： 全局注册组件可能导致一些问题，如性能问题和命名冲突。通过手动引入，你有更多的控制权，可以选择在需要的地方引入组件，而不是在整个应用中都注册。
  3. 减小打包体积： 只引入你真正需要的组件，有助于减小应用的打包体积。这对于优化应用的性能和加载时间是有帮助的。

示例：

// components/MyComponent.vue
<template>
  <div>
    <h2>This is MyComponent</h2>
  </div>
</template>

<script>
export default {
  // 组件选项
};
</script>

然后在其他组件中引入：


// 在其他组件中引入
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent
  },
  // 其他组件选项
};
</script>

实际上是一种局部注册组件的变体，也可以看作是手动管理的局部注册。但本质上也是在需要的地方引入并注册了组件。

小结

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8