vue3 taro小程序封装组件 用代码举例

好的，我这里举个示例代码，演示如何在Vue3中使用Taro UI组件库中的组件，并将其封装成自定义组件：

<template>
  <view class="custom-component">
    <taro-button type="primary" @click="handleClick">{{ buttonText }}</taro-button>
  </view>
</template>

<script>
import { defineComponent } from 'vue'
import { Button } from '@tarojs/components'
import '@tarojs/components/button/style/index.scss'

export default defineComponent({
  components: {
    TaroButton: Button
  },
  props: {
    buttonText: {
      type: String,
      default: 'Click me!'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
})
</script>

<style scoped>
.custom-component {
  text-align: center;
}
</style>

在上述代码中，我们首先使用 `defineComponent` 函数定义了一个Vue组件，并将其命名为 `custom-component`。接着，我们使用 `components` 选项引入了Taro UI的 `Button` 组件，并将其作为自定义组件 `TaroButton` 注册到了当前组件中。

该组件还接受一个名为 `buttonText` 的 props 属性，用于设置按钮的文本。当点击按钮时，该组件会触发一个 `click` 事件，通过 `$emit` 方法将事件抛出给父组件。

最后，我们使用了 `scoped` 样式标记，将该组件的样式作用于当前组件内部，而不是全局。