父组件与子组件的应用---(示例 商品列表)

自定义组件实现tab栏效果
1.找到列表页面的js ,把标题的数据写到父组件中，在data中进行定义

// pages/goods_list/goods_list.js
Page({
  data: {
    tabs: [ 
      {
        id: 0,
        value: "综合",
        isActive:true
      },
      {
        id: 1,
        value: "销量",
        isActive: false
      }, {
        id: 2,
        value: "价格",
        isActive: false
      }
    ]
  },
  onLoad: function (options) {
    console.log(options);//options可以直接获取页面参数
  },
})

2.在组件components中新建组件Tabs，然后在goods_list中引入Tabs组件，在goods_list.wxml文件中代码如下

<Tabs tabs="{{tabs}}"></Tabs> 
<!--  属性名  属性值 -->

并且需要在列表页面的json 中，写如下代码

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

3.返回组件Tabs中，开始写代码
在Tabs.js中的properties中接受一下数据：

properties: {
    tabs: {
      type: Array,
      value:[]
    }
  },

然后在Tab.wxml和wxss中分别书写结构和样式：

// Tabs.wxml 文件
<view class="tabs">
   <view class="tabs_title">
     <view 
     wx:for="{{tabs}}"
     wx:key="id" 
     class="title_item  {{item.isActive?'active':''}}" >{{item.value}}</view>
   </view>
   <view class="tabs_content"></view>
</view>

//Tabs.wxss文件
.tabs_title{
    display: flex;
}
.title_item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
    padding:15rpx 0;
}
.active{
    color:var(--themeColor);
    /* var和括号之间不可以有空格 */
    border-bottom: 5rpx solid currentColor;
}

4.实现点击那个切换样式，（子组件向父组件传递数据）
(1)给title_item绑定点击事件 handleItemTap ,传递当前的索引号 data-index="{{index}}"
(2)在Tabs.js中的methods中定义点击事件handleItemTap

methods: {
    hangdleItemTap(e) {
      console.log(e);
      // 1.获取点击的索引
      const { index } = e.currentTarget.dataset;
      // 2.触发 父组件中的事件  自定义
      // this.triggerEvent("事件名"，参数)
      this.triggerEvent("tabsItemChange",{index})
    }
  }

(3)回到父组件 goods_list.wxml中监听子组件

<Tabs tabs="{{tabs}}"  bindtabsItemChange = "handleTabsItemChange"></Tabs> 
<!-- 属性名 属性值 -->  <!-- 监听组件 bind子组件trigger中的方法名 -->

(4)在goods_list.js中处理handleTabsItemChange事件

handleTabsItemChange(e) {
    // 1.获取被点击的标题索引
    const { index } = e.detail;
    // 2.修改原数组
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    // 3.赋值到data中
    this.setData({
      tabs
    })
  }

5.点击不同的标题，下面显示不同的内容 --------》插槽slot
回到组件中，在tabs_content的view中 写入插槽标签

<view class="tabs_content">
       <slot></slot>
   </view>

然后在父组件goods_list.wxml中Tabs中插入元素

<Tabs tabs="{{tabs}}"  bindtabsItemChange = "handleTabsItemChange">
<!-- 属性名 属性值 -->  <!-- 监听组件 bind子组件trigger中的方法名 -->
 <block wx:if="{{tabs[0].isActive}}">0</block>
 <block wx:if="{{tabs[1].isActive}}">1</block>
 <block wx:if="{{tabs[2].isActive}}">2</block>
</Tabs> 

至此tab栏切换效果大致完成如下：

然后获取接口数据进行页面布局，由于要提交好几个参数进行请求，因此直接定义一个QueryParams，把每一项参数用key,value形式进行书写，由于onload事件加载的那个参数 options 就含有页面参数，因此对QueryParams中的cid进行一个赋值，并把返回成功数据进行页面渲染。

呈现结果如下：