小程式中的父子元件傳參

微信小程式元件化程式設計和實踐（上）：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)
}