自定义组件和父子页面[2]（12）

一、父向子传递数据

• 父页面 通过标签属性来传参
  子页面接受数据
• 在子组件的js文件的properties: {},存放要从父组件中接受的数据
  格式：数据名：{type：数据类型，value：默认值}
  例如：
  aaa:{ type:String,value:""}
bbb:{ type:Array,value:[]}
  即可以在父页面中定义数据，然后通过参数传递给子组件，子组件在properties中声明要接受的数据内容，然后即可自由使用父页面传来的数据，把数据当自己的使用

父页面wxml

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

父页面json

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

父页面js

// pages/demo13/demo13.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"原创",
        isActive:true
      },
      {
        id:1,
        name:"分类",
        isActive:false
      },
      {
        id:2,
        name:"关于",
        isActive:false
      },
      {
        id:3,
        name:"首页",
        isActive:false
      }
    ]
  }
})

子页面js

// components/Tabs/Tabs.js
Component({
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },
  data: {
   
  },
  //存放组件的回调函数，存放在methods下
  //获取被点击的索引，获取原数组，循环，将active改为false
  //为激活项添加选中效果
  methods: {
    handle_item_click(e){
      //因为要获取索引下标，就需要参数
      console.log("点击");
      console.log(e);
      //点击获取点击项的数组下标
      const {index}=e.currentTarget.dataset;
      //获取数组信息
      let {tabs}=this.data;
      //foreach改变active的值
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //将数据设置到页面
      this.setData({tabs})
    }
  }
})

子页面wxml和wxss不再粘贴，见前章节

二、子向父传递数据

写成一中代码后，tabs是父页面的数据，传递到子页面中，let {tabs}=this.data;仍然可以获得数据，是因为父页面将数据拷贝到了子页面，因此父页面执行Tabs标签时仍然可以正常执行，
但如下图所示，点击事件虽然执行了，但数据却没用改变

this.setData({tabs})这是因为只是把数据设置到本页面的tabs中，但父页面的tabs没有发生变化，因此每次点击事件发生以后，改变的只是子页面的拷贝tabs，父页面tabs没变
格式：this.triggerEvent("父组件自定义事件名",参数)
步骤：
1.在子页面触发父组件中自定义事件，同时传参this.triggerEvent(“父组件自定义事件名”,要传的参数)

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
  },
  methods: {
    handle_item_click(e){
      //点击获取点击项的数组下标
      const {index}=e.currentTarget.dataset;
      //触发父组件中自定义事件，同时传参
      this.triggerEvent("item_change",{index});
    }
  }
})

2.在父页面wxml标签中绑定事件

<Tabs tabs="{{tabs}}" binditem_change="handle_item_change"></Tabs>

3.写绑定事件函数（父页面的js）

// pages/demo13/demo13.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"原创",
        isActive:true
      },
      {
        id:1,
        name:"分类",
        isActive:false
      },
      {
        id:2,
        name:"关于",
        isActive:false
      },
      {
        id:3,
        name:"首页",
        isActive:false
      }
    ]
  },
  handle_item_change(e){
    //console.log(e);
    const {index}=e.detail;
    let {tabs}=this.data;
    //foreach改变active的值
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    //将数据设置到页面
    this.setData({tabs})
  }
})

在js中
= =会先转换类型，然后比较
===必须是相同类型才能比较
=>箭头函数相当于匿名函数，并且简化了函数定义,如果只有一条语句，则不需要写大括号和return，参数都相当于是引用类型