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

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

框架

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

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

腾讯低代码

我来解答赞 3 收藏

反馈

1 条解答

技术蕴轩 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