uni-app 百度小程序comment-list组件 vue3编译后无法正常传参

uni-app 百度小程序comment-list组件 vue3编译后无法正常传参

开发环境 版本号 项目创建方式
Windows win7 HBuilderX

示例代码：

<comment-list :comment-param='{openid: "GQjJcF-rNVC4-4h048T3h_TXXh", snid: "11792", path: "/page/detail/detail?id=11792", title: "测试"}' :toolbar-config="toolbarConfig" :is-folded="true" view-more-path="/pages/comment/list" detail-path="/pages/comment/detail" />

操作步骤：

  • 使用百度小程序 comment-list 组件

预期结果：

  • 可以正常传参

实际结果：

  • 看编译后代码是把小程序组件当成自定义组件编译了，不能正常传参

bug描述：

  • 百度小程序：comment-list 组件，编译后无法正常传参。错误信息：初始 commentParam 为空，请传入参数

更多关于uni-app 百度小程序comment-list组件 vue3编译后无法正常传参的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

一样的问题，请问解决了吗？

更多关于uni-app 百度小程序comment-list组件 vue3编译后无法正常传参的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发百度小程序时，如果 comment-list 组件在 Vue3 编译后无法正常传参，可能是由于以下几个原因导致的。以下是一些可能的解决方案和排查步骤：

1. 检查组件 props 定义

确保 comment-list 组件的 props 正确定义，并且在父组件中传参时使用了正确的属性名。

<!-- comment-list 组件 -->
<template>
  <view>
    <!-- 使用 props -->
    <view v-for="comment in comments" :key="comment.id">
      {{ comment.content }}
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  comments: {
    type: Array,
    required: true,
  },
});
</script>

在父组件中传参时，确保属性名和类型匹配：

<comment-list :comments="commentData" />

2. 检查 Vue3 和 uni-app 的兼容性

uni-app 对 Vue3 的支持可能存在某些兼容性问题，尤其是在百度小程序平台。确保使用的是最新版本的 uni-app 和 Vue3。

更新依赖：

npm install @vue/cli@latest uni-app@latest

3. 检查百度小程序的编译配置

百度小程序平台对 Vue3 的支持可能有限，需要检查编译配置是否正确。

在 manifest.json 中，确保已启用 Vue3：

{
  "vueVersion": "3"
}

4. 调试传参问题

如果传参仍然失败，可以通过以下方式调试：

  • 在父组件中打印传参数据，确保数据正确：

    <script setup>
const commentData = [
  { id: 1, content: "评论1" },
  { id: 2, content: "评论2" },
];
console.log("commentData:", commentData);
</script>

  • 在子组件中打印 props，检查是否接收到数据：

    <script setup>
const props = defineProps({
  comments: {
    type: Array,
    required: true,
  },
});
console.log("props.comments:", props.comments);
</script>
回到顶部