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

好的，下面是一个用Vue3和Taro框架实现的自定义组件的例子：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
import { defineComponent } from 'vue'
import { Text, View } from '@tarojs/components'

export default defineComponent({
  name: 'MyComponent',
  props: {
    message: {
      type: String,
      default: 'Hello, World!'
    }
  },
  components: {
    Text,
    View
  }
})
</script>

在上面的代码中，我们定义了一个名为`MyComponent`的组件，它接受一个名为`message`的属性。如果没有传入`message`属性，那么默认值为`Hello, World!`。我们使用了`@tarojs/components`中的`Text`和`View`组件来渲染组件内容。

使用该组件的方式如下：

<template>
  <view>
    <my-component message="Hello, Taro!"></my-component>
  </view>
</template>

<script>
import { defineComponent } from 'vue'
import MyComponent from '@/components/MyComponent'

export default defineComponent({
  name: 'HomePage',
  components: {
    MyComponent
  }
})
</script>

在上面的代码中，我们在`HomePage`组件中使用`MyComponent`组件，并传入了`message`属性值为`Hello, Taro!`。这样，页面上就会渲染出`MyComponent`组件，并显示出我们传入的消息。