小程序组件传参

目录：

以此为例：

组件/user-list/index.wxml：

<view class="list-item">
    <image src='{{ list.CUSTOMER_DATA.IMG_URL }}'></image>
    <text class="name">{{ list.CUSTOMER_DATA.NAME }}</text>     
    <text>{{ list.CUSTOMER_DATA.PHONE }}</text>
    <text class="prize" wx:if="{{currentTab == 2 }}">￥{{ list.INVITE_PAY_REWARD_VALUE }}</text>
    <text wx:if="{{currentTab == 0 }}">{{ list.FIRST_INVITE_LOGIN_TIME }}</text>
    <text wx:if="{{currentTab == 1 }}">{{ list.FIRST_INVITE_VISIT_TIME }}</text>
    <text wx:if="{{currentTab == 2 }}">{{ list.INVITE_PAY_REWARD_UPDATE_TIME }}</text>
    
</view>

组件/user-list/index.js：

Component({
    properties: {
        // 这里定义了innerText属性，属性值可以在组件使用时指定
        list: {
            type: Object,
        },
        currentTab:{
            type: String
        }
    },
    data: {

    },
    methods: {
        // 这里是一个自定义方法
        // demoMethod: function () { }
    }
})

组件json:

{
    "component": true,
    "usingComponents": {}
}

主页面/index/index.wxml使用组件

首先/index/index.json代码如下：

{
  "usingComponents": {
      "user-list": "/pages/components/user-list/index"
  }
}

/index/index.wxml使用组件代码：

<user-list 
    wx:for="{{lists3}}" 
    list="{{ list }}" 
    currentTab="{{ currentTab }}" 
    wx:for-index="index" 
    wx:for-item="list" 
    wx:key="{{index}}">
                
</user-list>

这样就可以成功使用组件了

 

给组件传值：

 

子组件接收值：

 

这样就可以直接在子组件里面使用/index/index.wxml传进去的值了

传送门：

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html