微信小程序封装组件（二）传参

本文主要是介绍微信小程序封装组件（二）传参，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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)
  },
})

这篇关于微信小程序封装组件（二）传参的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！