目录:
以此为例:
组件/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