uni-app vue3下wxcomponents下的自定义组件，编译到小程序后组件传参会丢失

在uni-app中使用Vue 3，并且涉及到在小程序环境下使用自定义组件（wxcomponents）时，如果遇到组件传参丢失的问题，通常是由于组件定义、传参方式或编译配置不正确导致的。下面提供一个简单的示例，展示如何在uni-app中定义和传递参数给小程序自定义组件，并确保参数正确传递。

1. 定义自定义组件

首先，在components目录下创建一个自定义组件，例如my-component。

my-component.vue

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

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: {
    type: String,
    default: 'Hello from MyComponent'
  }
});
</script>

2. 使用自定义组件

在页面的模板中使用这个自定义组件，并传递参数。

index.vue

<template>
  <view>
    <my-component :message="parentMessage"></my-component>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import MyComponent from '@/components/my-component.vue';

const parentMessage = ref('Hello from Parent');
</script>

<script type="application/json">
{
  "components": {
    "my-component": "/components/my-component"
  }
}
</script>

3. 确保编译配置正确

在pages.json或manifest.json中，确保你的项目配置支持小程序自定义组件。uni-app通常默认支持，但检查是否有特定配置需要调整。

4. 检查小程序开发者工具

• 确保小程序开发者工具使用的是最新版本。
• 在编译过程中查看控制台输出，是否有关于组件或参数的警告或错误信息。
• 检查编译后的代码，看看自定义组件是否正确引入和注册。

5. 示例调试

如果参数仍然丢失，可以尝试以下调试步骤：

• 在自定义组件的props接收处打印日志，确认是否接收到参数。
• 在父组件传递参数的地方打印日志，确认参数值是否正确。

// 在自定义组件的script setup中
console.log('Received message:', props.message);

// 在父组件的script setup中
console.log('Parent message:', parentMessage.value);

通过以上步骤，你应该能够定位并解决uni-app Vue 3下小程序自定义组件传参丢失的问题。如果问题依旧存在，建议检查uni-app和Vue 3的官方文档，或寻求社区的帮助。