微信小程序-自定义组件-子向父传递数据

新建文件Tabs

在这里插入图片描述

Tabs.js

// components/Tabs/Tabs.js
Component({
  /**
   * 里面存放的是 要从父组件中接收的数据
   */
  properties: {
    // 要接收的数据的名称
    aaa:{
      // type 要接收的数据的类型
      type:String,
      // value 默认值
      value:""
    },
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /*
    1 页面 .js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
    2 组件 .js 文件中 存放事件回调函数的时候 必须要存放在 methods中 ！！！
  */
  methods: {
    handeItemTap(e){
      /*
        1 绑定点击事件 需要在methods 中绑定
        2 获取被点击的索引
        3 获取原数组
        4 对数组循环
          1 给每一个循环项 选中属性 改为false
          2 给当前的索引的 项 添加激活选中效果就可以了！！！
        5 点击事件触发的时候
          触发父组件中的自定义事件 同时传递数据给父组件
          this.triggerEvent("父组件自定义事件的名称", 要传递的参数)
       */
       
     // 2 获取索引
     const {index} = e.currentTarget.dataset;
     // 5 触发父组件中的自定义事件 同时传递数据给父组件
     this.triggerEvent("itemChange", {index});
    }
  }
})

Tabs.json

{
  "component": true,
  "usingComponents": {}
}

Tabs.weml

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

<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="handeItemTap"
    data-index="{{index}}"
    >
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content">内容</view>

</view>

Tabs.wxss

.tabs{}
.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

demo.json

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

demo.wxml

<!-- 
  1 父组件（页面） 向子组件 传递数据 通过 标签属性的方式来传递
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据直接用即可
  2 子向父传递数据 通过事件的方式传递
    1 在子组件的标签上加入一个 自定义事件
 -->
<Tabs tabs="{{tabs}}" binditemChange="handeItemChange"> </Tabs>

demo.js

// pages/demo16/demo16.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }     
    ]
  },
  // 自定义事件 用来接收子组件传递的数据的
  handeItemChange(e){
    // 接收传递的参数
    const {index} = e.detail;
    let {tabs} = this.data;
     // 4 循环数组
     // [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致原数组被修改
     tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

    //  数组重新复制
     this.setData({
       tabs
     })  
  }
})