vue组件实现注册
Vue 组件注册的两种方式
全局注册
通过 Vue.component() 方法注册，注册后可在任意 Vue 实例中使用。通常在项目的入口文件（如 main.js）中进行：
import Vue from 'vue';
import MyComponent from './MyComponent.vue';
Vue.component('MyComponent', MyComponent);全局注册的组件名称建议使用 PascalCase（大驼峰命名法），在模板中既可用 <MyComponent> 也可用 <my-component>。
局部注册
在需要使用的组件内部通过 components 选项注册，仅在该组件作用域内有效：
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent // 或 'ChildComponent': ChildComponent
}
};局部注册的组件在模板中直接使用注册时的名称（如 <ChildComponent/>），无需全局注册的命名转换。
自动全局注册（批量注册）
通过 require.context 动态导入组件目录下的所有文件，适合大量基础组件的全局注册：
const requireComponent = require.context(
'./components', // 组件目录
false, // 是否搜索子目录
/Base[A-Z]\w+\.(vue|js)$/ // 匹配基础组件文件名
);
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName);
const componentName = fileName.split('/').pop().replace(/\.\w+$/, '');
Vue.component(componentName, componentConfig.default || componentConfig);
});注意事项
- 命名冲突：全局注册需确保组件名称唯一，避免覆盖。
- 性能影响：全局注册会增加初始包体积，未使用的组件无法被 Tree Shaking 优化。
- 异步组件：局部注册时可结合
defineAsyncComponent实现懒加载：
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));- 递归组件：局部注册的组件在其模板中可以直接调用自身，但需设置
name选项。
