微信ウィジェット:ページとコンポーネントの値伝達のいくつかの方法

一、ウィジェットはid属性を通じて値を伝達する
ラベルにid属性を追加して値を渡すと、現在のラベルにクリックイベントを追加してidの値を取得できます.1、id属性を追加して値を送る(index.wxml)

  
  	
         id  
    
	
  

2、クリックイベントでidの値を取得する(index.js)

//index.js
Page({  
  //      
  onGetIdValue (e) {
 	// currentTarget:         
    console.log(e.currentTarget.id)   
    //               
    // let id = e.currentTarget.id
    // let jsonId = JSON.parse(id)
    // console.log(jsonId)
  }
})

このid値を取得すると値を処理でき、グローバルオブジェクトを設定することで数値を渡すことができます(これにより、どのコンポーネントでも取得できます).必要に応じて設定し、グローバルデータを過度に設定することはできません.

//       
let app=getApp();
//              
app.requestDetailid=e.currentTarget.id;

特定のアプレットイベントオブジェクトのプロパティリストの解析については、公式ドキュメントを参照してください.https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
二、ウィジェットはdata-xxxx方式で値を伝達する
この方法はidを介して値を伝達するのと少し似ていて、ラベルに対応する属性を追加して値を伝達し、イベントオブジェクトを介して値を取得します.ラベルにdata-の先頭のプロパティを追加し、渡したい値を書き込み、現在のラベルにクリックイベントを追加して値を取得します.
1、data-属性を追加して値を送る(index.wxml)

  
       data-xxxx  
  

2、クリックイベントでdata-の値を取得する(index.js)

//index.js
Page({
  //      
  onGetDataValue(e) {
    console.log(e)
    // dataset       data-               
    console.log(e.currentTarget.dataset) // {age: "22", firstName: "winne"}
  }
})

注意:data-で始まると、複数の単語がハイフネーション-リンクされ、大文字は使用できません(大文字は自動的に小文字に変わります).厳密な正確な書き方:data-element-typeは最終的にevent.currentTarget.Datasetではハイフンがアルパカに変わります:elementType.
特定のアプレットイベントオブジェクトのプロパティリストの解析については、公式ドキュメントを参照してください.https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
三、ページがジャンプして、ジャンプしたページに値を渡す
シミュレーションのシナリオは、受注詳細ページで説明された物流情報を見て、物流詳細を確認したい場合、受注詳細ページで受注orderIdを物流詳細ページに転送する必要があります.1、注文詳細ページコンポーネント(orderList)

      


//orderList.js
//       
onJumpToLogisticsDetail(e) {
// target:        
   let orderid = e.target.dataset.orderid
   let num = e.target.dataset.num
   wx.navigateTo({
     url: `/pages/logisticsDetail/logisticsDetail?orderId=${orderid}&num=${num}`
      })
    }    

2、物流詳細ページコンポーネント(logisticsDetail)
コンポーネントのライフサイクルコールバック関数でurlアドレスから渡された値を直接取得できます.onLoad(Object query):ページロード時にトリガーされます.1ページに1回しか呼び出されず、onLoadのパラメータで現在のページパスを開くパラメータを取得できます.

//logisticsDetail.js
 onLoad: function (options) {
    console.log(options)  //{orderid:"678465",num:"1"}
  }  

ライフサイクルコールバック関数の詳細は、公式サイトを参照してください.https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#ライフサイクルコールバック関数
四、親コンポーネントから子コンポーネントへの値伝達(properties)
1、親コンポーネントのjsonファイルにサブコンポーネントの参照を宣言する

// parents.json
{
  "usingComponents": {
    "w-child": "/components/child/child"
  }
}

2、親コンポーネントのwxmlでのサブコンポーネントの使用

           ，                     。

3、サブコンポーネントjsで親コンポーネントから渡された値を取得する

properties        ，             ，            ， type       、 value        、 observer               

// child.js
properties: {  //                  （ wxml    ，  js   this.data.fatherName/this.properties.fatherName      ），      properties      
  fatherName: {
    type: String
  },
  fatherAge: Number
}

公式サイトのヒント:properties定義セグメントでは、属性名はアルパカの書き方(fatherName)を採用しています.wxmlでは、属性値を指定する場合はハイフン表記(father-name="winne")を使用し、データバインドに適用する場合はアルパカ表記(attr="{{fatherName}}}})を使用します.
実は私たちもすべてアルパカの書き方を使うことができます(低バージョンの微信はサポートされていないかもしれません).
詳細コンポーネントの構成解析については、公式サイトを参照してください.https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
五、サブアセンブリから親アセンブリへの値の伝達(this.triggerEvent()
子コンポーネントが手動でイベントをトリガーし、親コンポーネントがイベント1をリスニングし、子コンポーネントがカスタムイベントをトリガーし、親コンポーネントにデータを渡す必要があります.

tab

2、サブアセンブリはクリックイベントで自発的にカスタムイベントをトリガーする

// child.js
onChangeAnchor(e) {
      var index = e.target.dataset.index      
      //         
      let myEventDetail = { //                 
        val: index
      }
      // myEventDetail   ，              
      // changeNaviIndex         ，        
      this.triggerEvent('changeNaviIndex', myEventDetail)
    }

3、親コンポーネントwxmlで子コンポーネントのカスタムイベントを傍受する

4、親コンポーネントのjsにイベント関数を書き、サブコンポーネントから渡されたデータを取得する

// parents.js
  onGetIndex( paramData) { // paramData        this.triggerEvent()
    console.log(paramData.detail.val)  // 0
  }