小程序开发四——自定义组件

1、自定义组件：

Tabs.wxml:

<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view> -->
    <view
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive ? 'active' : ''}}"
    bindtap="handleItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
    </view>
  </view>
  <view class="tabs_content">内容</view>
</view>

Tabs.wxss:

.tabs{

}

.tabs_title {
  display: flex;
  pad: 10rpx;
}

.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active{
  color: red;
  border-bottom: 10rpx solid currentColor;
}
.tabs_content{

}

2、父向子传递数据：

父组件wxml:

<Tabs aaa="123"></Tabs>

子组件js：

// 里面存放的事从父组件中接收的数据
  properties: {
    // 接收的数据名称
    aaa: {
      // type 接收的数据类型
      type: String,
      value: ""
    }
  },

子组件wxml使用：

<view>{{aaa}}</view>

3、子向父传递数据：

子组件js:

methods: {
    handleItemTap(e) {
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发父组件中的自定义事件，同事传递数据给父组件
      this.triggerEvent('itemChange', {index});
    }
  }

父组件wxml：

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

父组件js:

handleItemChange(e) {
    // 接收传递过来的参数
    const {index} = e.detail;
    let {tabs} = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive=true : v.isActive=false)
    this.setData({
      tabs: tabs
    })
  },