uniapp中compents

### 如何在 UniApp 中使用 Components 组件

#### 定义组件

为了定义一个新的组件，在 `components` 目录下创建相应的文件夹以及 `.vue` 文件。例如，如果要创建名为 `myComponent` 的新组件，则应在 `components/myComponent/` 下建立 `myComponent.vue` 文件[^3]。

<template>
  <view class="custom-component">
    <!-- 自定义模板 -->
  </view>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {},
  data() {
    return {};
  },
};
</script>

<style scoped>
.custom-component {
  /* 样式 */
}
</style>

#### 注册并使用组件

为了让其他页面能够访问这个新的组件，有两种主要的方法来注册它：

- **局部注册**：仅限于特定的父组件内使用该子组件；需显式引入并在其 `<script>` 部分声明。

- **全局注册**：使得整个应用都可以无须额外配置就能调用此组件；通常是在项目的入口文件 `main.js` 或者通过插件形式完成注册操作[^4]。

对于全局注册的情况，可以在 `main.js` 添加如下代码片段实现自动加载位于 `components` 文件夹下的所有 .vue 结构化单元作为公共资源的一部分[^5]。

// main.js
import Vue from 'vue';
const requireComponent = require.context('@/components', true, /\.vue$/);
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '');
  Vue.component(componentName.split('/').pop(), componentConfig.default || componentConfig);
});

当完成了上述步骤之后，在任何地方只需要按照标准语法引用这些已经预先设定好的标签名称就可以轻松嵌入所需的功能模块了。

例如在一个页面里想要加入之前提到过的 `myComponent` ，只需简单地将其放置到目标位置即可生效[^2]。

<!-- PageA.vue -->
<template>
  <view>
    <my-component></my-component> <!-- 使用已注册的组件 -->
  </view>
</template>