uniapp自定义组件

UniApp 是一个基于 Vue.js 的跨平台开发框架，可以通过一套代码同时构建运行在多个平台的应用程序，包括 iOS、Android、H5 等。在 UniApp 中，可以使用自定义组件来实现特定的功能或界面。

要创建一个自定义组件，首先需要在项目的 `components` 目录下创建一个新的文件夹，用于存放组件的相关文件。然后，在该文件夹中创建一个以 `.vue` 后缀的文件，作为组件的主文件。

在组件的主文件中，可以编写组件的模板、样式和逻辑代码。以下是一个简单的自定义组件示例：

<template>
  <div class="custom-component">
    <button @click="handleClick">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  name: 'CustomComponent',
  props: {
    buttonText: {
      type: String,
      default: 'Click me'
    }
  },
  methods: {
    handleClick() {
      // 处理按钮点击事件
      console.log('Button clicked');
    }
  }
}
</script>

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

在上面的示例中，我们创建了一个名为 `CustomComponent` 的自定义组件。组件中包含一个按钮，点击按钮会触发 `handleClick` 方法，并在控制台输出日志。组件还接受一个名为 `buttonText` 的属性，用于设置按钮的文本内容。

创建完自定义组件后，可以在需要使用该组件的页面中引入并使用它。在页面的 `.vue` 文件中，使用 `import` 语句引入组件，然后在模板中使用组件的标签。