微信小程式父子元件之間的資料傳遞

1.父子元件之間通訊的 3 種方式
① 屬性繫結
用於父元件向子元件的指定屬性設定資料，僅能設定 JSON 相容的資料(只能傳遞資料，不能傳遞
方法)
② 事件繫結
用於子元件向父元件傳遞資料，可以傳遞任意資料(包括資料和方法)
③ 獲取元件例項
父元件還可以通過 this.selectComponent() 獲取子元件例項物件
這樣就可以直接訪問子元件的任意資料和方法

2. 屬性繫結
   屬性繫結用於實現父向子傳值，而且只能傳遞普通型別的資料，無法將方法傳遞給子元件。
   父元件的示例程式碼如下：

data: {
 // 父元件中的data節點
 count: 0
}
// 父元件的wxml結構
<my-test3 count="{{count}}"></my-test3>
<view>------</view>
<view>父元件中，count值為 {{count}}</view>

子元件在 properties 節點中宣告對應的屬性並使用。

// 子元件的properties 節點
properties: {
count: Number
}
// 子元件的wxml結構
<text>子元件中， count值為：{{count}}</text>

3.事件繫結
事件繫結用於實現子向父傳值，可以傳遞任何型別的資料。使用步驟如下：
① 在子元件的 js 中，在特定的時機通過呼叫 this.triggerEvent (‘自定義事件名稱’, { /* 引數物件
*/ })產生一個自定義事件, 並且可以帶上事件引數物件.
② 在父元件的 wxml 中的子元件標籤中，使用 bind :自定義事件名稱="事件處理函式"監聽自定義事
件。
③ 在父元件的 js 中，定義一個函式，這個函式即將通過自定義事件的形式，傳遞給子元件
④ 在父元件的 事件處理函式中，通過 e.detail 獲取到子元件傳遞過來的資料。
步驟1：在子元件的 js 中，在特定的時機通過呼叫 this.triggerEvent 產生一個自定義事件

// 子元件中的 wxml結構
<text>子元件中，count值為： {{count}}</text>
<button bindtap="addCount">+1</button>
// 子元件中的js程式碼
methods: {
  addCount() {
    // this.setData這行程式碼寫的很多此一舉
    // 因為只要父元件修改了它傳遞到子元件的資料, 子元件自然就隨之進行更新了
    this.setData({
      count: this.properties.count + 1
   })
    // 使用 this.triggerEvent去觸發父元件的自定義事件
    // 並將數值同步給父元件
    this.tiggerEvent('sync', {value: this.properties.count})
    }
   }

步驟2：在父元件的 wxml 中的子元件標籤中，使用 bind :自定義事件名稱=“事件處理函式”監聽
自定義事件

<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>

步驟3：在父元件的 js 中，定義一個函式，這個函式在自定義事件產生的時候, 會得到執行

// 在父元件的JS檔案中，定義一個事件
syncCount (e) {
  console.log(e)
}

步驟4：在父元件的 js 中，通過 e.detail 獲取到子元件傳遞過來的資料。

// 父元件的js檔案
syncCount (e) {
  this.setData({
    // 父元件通過事件物件 e 獲取到子元件傳遞的值
    count: e.detail.value
 })
}

4.獲取元件例項

可在父元件裡呼叫 this.selectComponent(“id或class選擇器”) ，獲取子元件的例項物件，從而直
接訪問子元件的任意資料和方法。呼叫時需要傳入一個選擇器，例如 this.selectComponent(".my-
component")

<!--父元件的wxml檔案-->
<my-test class="cusstomA" id="cA" count="{{count}}" bind:sync="syncCount">
</my-test>
<button bindtap="getChild">獲取子元件例項</button>
//父元件的js檔案 按鈕的tap事件處理函式
getChild() {
  // 切記下面的引數不能傳遞標籤選擇器，不然返回的是null
  // 也可以傳遞ID選擇器
  const child = this.selectComponent('.customA')
  // 呼叫子元件的setData方法，修改count的值，
  child.setData({ count: this.data.count + 1 })
  child.addCount() // 直接呼叫子元件的addCount方法，該方法在child例項物件的__proto__上可以訪問到該方法
}