在需要用组件的json文件里设置
找到组件的地址
"usingComponents": {
"TabList":"../../components/TabList/TabList"
},
随后在页面里使用标签
<TabList tabs="{{tabs}}" bind:tabsItemChange="handleItemTap">
<!-- <block wx:if="{{tabs[0].isActive}}">
aa
</block>
<block wx:elif="{{tabs[1].isActive}}">
bb
</block>
<block wx:elif="{{tabs[2].isActive}}">
cc
</block> -->
</TabList>
父穿子:
在父组件中,利用子组件标签的属性传递数据,在自组件的properties里接受参数,可以设置type类型或者值
properties: {
tabs:{
type:Array,
value:[]
}
},
子传父:
在子组件先在wxml页面写入事件
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.value}}
</view>
在js页面的methods里触发事件并向上派发事件
/**
* 组件的方法列表
*/
methods: {
handleItemTap(e){
const {index}=e.currentTarget.dataset;
this.triggerEvent('tabsItemChange',{index})
}
}
在标签里使用事件:
<TabList tabs="{{tabs}}" bind:tabsItemChange="handleItemTap">
<TabList/>
在js文件里使用方法进行逻辑操作
handleItemTap(e){
}