微信小程序---组件使用及组件间传值

创建子组件：Tabs

Tabs.wxml

<view class="menu">
  <view 
    wx:for="{
   
   { listMenu }}"  
    wx:for-item="menu" 
    wx:for-index="index"
    wx:key="index"
    class="{
   
   { menu.isActive === true ? 'active' : '' }}"
    bindtap="handlerMenuTap"
    data-menuname="{
   
   { menu.name }}">
    {
   
   { menu.name }}
  </view>
</view>

Tabs.wxss

.menu{
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-around;
  color: black!important;
  box-shadow: 1px 1px 1px #0087AC;
}
.active{
  font-weight: 600;
  color: #0087AC;
}

Tabs.js

Component({
  properties: {
    listMenu: {
      type: Array, // 参数类型
      value: [] // 参数默认值
    }
  },
  data: {},
  methods: {
    handlerMenuTap(e){
      // 子组件通过自定义事件向父组件传参
      this.triggerEvent('menuClick', {"menuName" : e.currentTarget.dataset.menuname})
    }
  }
})

父组件中引入并使用子组件

index.wxml

<!--父组件传参，并监听子组件定义的自定义事件-->
<Tabs listMenu="{
   
   { listMenu }}" bindmenuClick="menuClick" />

index.json(页面配置文件)

{
  "usingComponents": {
    "Tabs": "../../components/Tabs/Tabs"
  }
}

index.js

Page({
  data: {
    listMenu : [
      {
        name : '总部',
        isActive : true
      },
      {
        name : '地球',
        isActive : false
      },
      {
        name : '火星',
        isActive : false
      },
      {
        name : '宇宙',
        isActive : false
      }
    ]
  },
  menuClick(e){
    var menuName = e.detail.menuName // 获取子组件传过来的 menuName 参数
    var menus = this.data.listMenu
    menus.forEach(item => {
      item.name == menuName ? item.isActive = true : item.isActive = false
    })
    this.setData({
      listMenu: menus
    })
  }
})

微信小程序---组件使用及组件间传值

猜你喜欢