微信小程序自定義事件

案例結構

首先,我仍是會以案例的形式向你們講解(這樣也能方便你們更好的理解)
簡單介紹一下案例項目的內容(以上一章自定義組件的案例爲基礎)
項目名稱:component
自定義子組件cpt
父組件:logs

在子組件cpt中有一個按鈕,按鈕上顯示的是當前這按鈕組件存儲的數值counter.

父組件logs引用三個cpt子組件,在父組件有它本身的第一個變量total.

每點擊一次不一樣的按鈕都讓按鈕上的數值不一樣大小的增長,

同時total變量記錄的是三個按鈕的數值總和,如圖:

編寫子組件

cpt.wxml

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  <button bindtap="_incrementCounter">{{counter}}</button>
</view>

子組件cpt中有一個按鈕,按鈕添加點擊事件_incrementCounter,同時按鈕內容顯示的是其數值counter

cpt.js

Component({
  properties: {
    // 這裏定義了num屬性，屬性值能夠在組件使用時指定
    num: {          // num定義的就是點擊每一個按鈕分別增長的數值,能夠在調用組件的時候進行更改
      type: Number,
      value: 1
    }
  },
  data: {
    // 這裏是一些組件內部數據
    counter: 0      // counter定義的是每一個按鈕上的數值
  },
  methods: {
    // 這裏是一個自定義方法,每次點擊按鈕增長對應的數值
    _incrementCounter (e) {
      let num = this.data.num
      this.setData({
        counter: this.data.counter + num
      })
     // 微信小程序中是經過triggerEvent來給父組件傳遞信息的
      this.triggerEvent('increment', {num: num})  // 將num經過參數的形式傳遞給父組件
    }
  }
})

　

編寫父組件

子組件編寫完以後,就能夠在父組件logs中引用了,而且給它設定自定義事件
(別忘了在父組件的.json文件中進行引用喲)
logs.json

{
  "navigationBarTitleText": "查看啓動日誌",
  "usingComponents": {
    "component-tag-name": "../components/cpt/cpt"
  }
}

logs.wxml

<!--logs.wxml-->
<view class="container log-list">
  <!-- 如下是對一個自定義組件的引用 -->
   三個按鈕總和: {{total}}
  <component-tag-name bind:increment="incrementTotal" num="2"></component-tag-name>
  <component-tag-name bind:increment="incrementTotal" num="3"></component-tag-name>
  <component-tag-name bind:increment="incrementTotal" num="5"></component-tag-name> 
</view>

logs.js

Page({
  data: {
    logs: [],
    total: 0,  // 父組件中的數據total用以記錄三個按鈕總和
  },
  incrementTotal (e) {    // 定義父組件的
    console.log(e.detail)    // 經過e.detail獲取點擊的那個對象
    var num = e.detail.num
    this.setData({
      total: this.data.total + e.detail.num
    })
  },
})

分別點擊三個按鈕時能夠看到數值上都有變化的,而且控制檯輸出的e.detail中也有對應的num屬性.

原文：https://www.jianshu.com/p/9a35a8b961f2