小程序中的父子组件传参

微信小程序组件化编程和实践（上）：https://cloud.tencent.com/developer/article/1029112

微信小程序组件化编程和实践（下）：https://cloud.tencent.com/developer/article/1029113

根据公司的业务需求我是如何封装组件的：https://cloud.tencent.com/developer/article/1745596

思考：为什么使用组件？组件之间传参的意义何在？

组件化这个思想，类似于工业制造中的汽车生产-----零件组装，这样不管是是对于汽车的维修、改装都提供了便历。在软件开发模型——构建组装模型中，组件复用是很重要的一个思想，对于一个公司，他们可以可以构建自己的组件库，从而他们对相同类型的软件提供大大便历，并且这些组件库中的组件，都是经过时间检验的，不容易出错。

组件间的传值：因为组件我们只会定义一些接口来对接，而所需要的数据需要从某个入口传入（父组件）。当我们触发子组件的时候，父组件对应的也应该做出相应的反应。

一、父组件向子组件传参

          方式：通过属性绑定的方式传递

步骤： 具体参见官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

1、在微信小程序结构目录中，新建一个组件组（组件的集合）。该组件组与页面在同一级目录下

2、新建一个header组件

   a、header.json   设置"component": true ——含义：可设置自定义组件

   b、父组件引用  ***.json设置 引用组件路径 "header":"../../components/header/header"

父组件 设置tabs属性并绑定tabs参数
***.wxml
<header tabs="{{tabs}}"></header>
子组件 
***.js  利用properties获取父组件属性，并设置类型
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  }
)}

  二、子组件向父组件传递参数

                   方式：通过方法绑定的方式传递

  1.在子组件中通过triggerEvent定义一个函数并绑定参数

   2.在父组件绑定子组件中定义的方法，并写一个处理的方法接受传递过来的参数

   例如：在子组件中自定义一个itemChange方法    ，在父组件中绑定这个方法   （bind+itemChange）,并处理定义一个handleItemChange来处理接受的参数。

========================子组件定义
header.wxml
<view  bindtap="tapchange"></view>
-------header.js
Component({
 methods: {
    tapchange:function(e){
    // 利用子组件向父组件
    const {index} = e.currentTarget.dataset//获取当前选中的下标
    console.log(index)
    this.triggerEvent("itemChange",{index})//自定义事件(bind+'自定义名')：用它触发父组件的定义事件，同时给父组件传参
    }
  }
})

=======================父组件定义  
-------***.wxml  
<headertabs="{{tabs}}" binditemChange="HandleItemChange"></header>
-------***.js
HandleItemChange:function(e){
   console.log(e.detail.index)
}