uniapp封装组件并示例

Uniapp 是一个跨平台的开发框架，可以方便地开发出同时支持多个平台的应用程序。在 Uniapp 中封装组件可以提高代码复用性，使得开发更加高效。下面是一个简单的封装组件的示例：

1. 创建组件

在项目中的 `components` 文件夹下创建一个 `HelloWorld` 组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: {
      type: String,
      default: 'Hello, World!'
    }
  }
}
</script>

这个组件只是简单地显示一个文本信息，可以通过 `props` 属性传递要显示的信息。

2. 使用组件

在需要使用 `HelloWorld` 组件的页面中，可以通过以下方式引入组件：

<template>
  <div>
    <HelloWorld message="Hello, Uniapp!" />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

在这个页面中，我们引入了 `HelloWorld` 组件，并且使用了 `message` 属性来传递要显示的信息。

以上就是一个简单的封装组件的示例。在实际开发中，根据需要可以编写更复杂的组件，并且可以灵活地使用 `props`、`events` 等属性和方法来传递数据和交互。