微信小程序封装组件(二)传参
作者:互联网
1,准备子组件tab
// tab.json
{
"component": true
}
// tab.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
//接收父组件的参数
properties: {
tabList: {
type: Array,
value: []
},
tabId: {
type: String,
value: '0'
},
},
//组件的初始数据
data: {},
//组件的方法列表
methods: {
_tabChange(e){
let tabId = e.currentTarget.dataset.id
//调用父组件方法,传参
this.triggerEvent('onTab', tabId)
},
}
})
// tab.wxml
<view class="tabBox">
<view wx:for="{{tabList}}" wx:key='index' class="tab">
<view class='{{item.id==tabId?"active":""}}'
bindtap="_tabChange"
data-id='{{item.id}}'>
{{item.title}}
</view>
</view>
</view>
// tab.wxss
.tabBox{
display: flex;
}
.tab{
width: 200rpx;
margin-top: 20rpx;
text-align:center;
}
.tabBox .active{
color: red;
font-size: 32rpx;
font-weight: 700;
border-bottom: 4rpx solid red;
}
2,使用
// index.json 引入
"usingComponents": {
"tab":"/components/tab/tab"
},
// index.wxml 使用
<tab tabList='{{tabList}}' tabId='{{tabId}}' bind:onTab='onTab'></tab>
// index.js 传数据
// pages/eg-flex-one/index.js
Page({
data: {
tabList:[
{title:'美食',id:'0'},
{title:'风景',id:'1'},
{title:'生活',id:'2'}
],
tabId:'0',
},
//方法
onTab(e){
let tabId = e.detail
this.setData({
tabId:tabId
})
console.log(tabId)
},
})
标签:传参,index,tabId,封装,title,微信,tab,组件,id 来源: https://blog.csdn.net/weixin_46899191/article/details/120804698