父子组件传值2

上一个界面虽然实现功能，但还有不足。

const {index} = e.currentTarget.dataset;
      //3 获取data中的数组
      let {tabs} = this.data;
      // console.log(this.data);
      //4 循环数组
      // [].foreach遍历数组 遍历数组的时候修改了v，也会导致原数组被修改  v是每一个循环项 i索引
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
      this.setData({
        tabs
      })

此处循环后，设值给了组件内的新数组。并不对原数组进行更改。

现在需要进行更改，由子组件（自定义组件）向父组件传值，对原数组进行更改。

步骤

1. 自定义组件中定义 传递数据的自定义事件
2. 在调用组件时绑定事件，绑定方法为bind+自定义事件名称
3. 在页面js中添加自定义事件，此时发现可以打印索引值index。
4. 然后进行上个页面对数组的操作，修改原数组。

methods: {
    handleItemTap(e){
      // console.log("点击我试试");
      // 1.绑定点击事件
      // 2.获取被点击的索引
      // 3.获取原数组
      // 4.对数组循环
      //   1 给每一个循环性 选中属性改为false
      //   2 给当前的索引的项添加激活选中效果就可以了
        //5. 点击事件触发
        // 出发父组件中的自定义事件，同时传递数据给父组件
        // this.triggerEvent("父组件自定义事件的名称",要传递的参数)
        
      //2. 获取索引
      const {index} = e.currentTarget.dataset;
      this.triggerEvent("itemChange",{index});
    }
  }

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

demo11.js

// pages/demo11/demo11.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      },
    ]
  },
  //自定义事件，用来 接受子组件传递数据的
  handleItemChange(e){
      // console.log(e);
      const {index} = e.detail;  //赋值索引值
      // console.log(index);
       let {tabs} = this.data;  //拿到原数组
      //4 循环数组
      // [].foreach遍历数组 遍历数组的时候修改了v，也会导致原数组被修改  v是每一个循环项 i索引
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false) //修改原数组
      this.setData({ //把值填充回去
        tabs
      })
  }
})