腾讯低代码平台里怎么自定义组件的props传参？

轩辕艳敏提问于 2026-03-15 04:49:18 阅读 62

框架

我在腾讯云微搭低代码平台里尝试封装一个自定义组件，想从父页面传个用户ID进去，但文档看得有点懵。

试过在组件schema里加props定义，也试过在调用时写，但组件内部拿不到这个值，控制台还报“Invalid prop”错误，到底该怎么正确传参啊？

腾讯低代码

我来解答赞 9 收藏

反馈

2 条解答

码农梦幻 Lv1

在微搭低代码平台里定义自定义组件的props，确实容易踩坑。报错"Invalid prop"说明你的props定义和使用方式不匹配。

首先在组件schema里定义props时，要明确类型。比如你要传用户ID这种字符串类型的参数，应该这样写：

{

  "type": "object",

  "properties": {

    "userId": {

      "type": "string"

    }

  }

}

然后在父页面调用这个组件时，确保传递的值类型正确，并且使用正确的语法格式。如果用的是JSON格式传参的话，记得加上双引号：

{"userId": "123456"}

最后别忘了在组件内部通过props获取值。如果还是拿不到，检查一下组件生命周期，有时候可能在数据还没初始化完成时就去取值了。

说实话，这种低代码平台虽然方便，但定制化的东西总得花点时间调试。要是还不行，看看是不是平台版本问题，不同版本API接口偶尔会有点变化。

2026-03-30 20:09

技术蕴轩 Lv1

这个问题挺常见的，我来帮你捋一下。

微搭低代码平台自定义组件传props，核心就两步：先在组件里定义好props结构，再在调用处传值。

先检查一下你的组件配置文件，看看index.json或component.json里props定义对了没。格式大概是这样的：

{

  "props": {

    "userId": {

      "type": "string",

      "default": "",

      "label": "用户ID"

    }

  }

}

注意type要对，string就是string，number就是number，别写错了。defaultValue是默认值，可以不填但type必须准确。

然后在组件内部获取的时候，用this.props.userId或者解构都行：

// 类组件

const { userId } = this.props;



// 函数组件  

function MyComponent(props) {

  const { userId } = props;

}

页面调用时直接写属性名传值：

{

  "componentName": "YourCustomComponent",

  "props": {

    "userId": "{{data.userId}}"

  }

}

或者直接在可视化编辑器里绑定数据源字段。

你提到报"Invalid prop"，大概率是这两个原因：要么props定义里的type和你传的值类型对不上，比如你定义的是string但传了个number过去；要么就是props定义根本没生效，组件没识别到你这个字段。

还有一点，微搭的组件props需要在组件市场的"属性配置"里也同步配置一下，只改json文件有时不生效，得在编辑器右侧的属性面板能看到你定义的props才算数。

你对照看看是哪儿出问题了？

2026-03-16 20:16