How to pass props from one component to an another component in WeChat Mini-Program

Question

I am new to WeChat Mini program development. I came from React Technology there we were passing custom attributes ( props ) from one component to an another. I am trying to pass props from one component to another component but here I am failed. Please help me how to send props in WeChat Mini-Program .

Thanks

First Component Code

    <!--index.wxml-->
<view class="container">
    <headerComponent prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}" />
</view>

Second Component Code

    <!--components/header.wxml-->
<text>Header Component</text>
<text>{{prop-a}}</text>

I am trying but prop-a data is not showing it give me result NaN

score 1 · Answer 1 · answered Dec 14 '19 at 08:16

Try declare a variable use camelCase(propA) not camel-case(prop-a).

And don't forget declare props in component.properties like below,

Component({
  properties: {
    propA: {
      type: String
    }
  }

<text>Header Component</text>
<text>{{propA}}</text>

And it should work;

How to pass props from one component to an another component in WeChat Mini-Program

1 Answers1