在上一章節(jié)中我是給大家介紹了一下微信小程序的自定義組件,這一章我要說說小程序的另一個強(qiáng)大功能--自定義事

什么是自定義事件呢,你可以簡單的理解為:在觸發(fā)子組件的一些事件的時候,同時也能觸發(fā)父組件對應(yīng)的事件并對父組件中的某些數(shù)據(jù)進(jìn)行修改的事件就是自定義事件.

有翻閱學(xué)習(xí)過小程序官方給出的自定義組件教程的小伙們一定會有和我一樣想爆粗口的沖動...

因為上面說的真的有點(diǎn)亂...

不過沒事,今天在這里博主會詳細(xì)的講解講解微信小程序的自定義事件.

案例結(jié)構(gòu)

首先,我還是會以案例的形式向大家講解(這樣也能方便大家更好的理解)

簡單介紹一下案例項目的內(nèi)容(以上一章自定義組件的案例為基礎(chǔ))

項目名稱: component

自定義子組件cpt

父組件: logs

在子組件 cpt 中有一個按鈕,按鈕上顯示的是當(dāng)前這按鈕組件存儲的數(shù)值 counter .

父組件 logs 引用三個 cpt 子組件,在父組件有它自己的先進(jìn)個變量 total .

每點(diǎn)擊一次不同的按鈕都讓按鈕上的數(shù)值不同大小的增加,

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

編寫子組件

cpt.wxml

<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) -->
<view class="inner">
  <button bindtap="_incrementCounter">{{counter}}</button>
</view>

子組件cpt中有一個按鈕,按鈕添加點(diǎn)擊事件 _incrementCounter ,同時按鈕內(nèi)容顯示的是其數(shù)值 counter

cpt.js

Component({
  properties: {
    // 這里定義了num屬性，屬性值可以在組件使用時指定
    num: {          // num定義的就是點(diǎn)擊每個按鈕分別增加的數(shù)值,可以在調(diào)用組件的時候進(jìn)行更改
      type: Number,
      value: 1
    }
  },
  data: {
    // 這里是一些組件內(nèi)部數(shù)據(jù)
    counter: 0      // counter定義的是每個按鈕上的數(shù)值
  },
  methods: {
    // 這里是一個自定義方法,每次點(diǎn)擊按鈕增加對應(yīng)的數(shù)值
    _incrementCounter (e) {
      let num = this.data.num
      this.setData({
        counter: this.data.counter + num
      })
     // 微信小程序中是通過triggerEvent來給父組件傳遞信息的
      this.triggerEvent('increment', {num: num})  // 將num通過參數(shù)的形式傳遞給父組件
    }
  }
})

編寫父組件

子組件編寫完之后,就可以在父組件logs中引用了,并且給它設(shè)定自定義事件

(別忘了在父組件的.json文件中進(jìn)行引用喲)

logs.json

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

logs.wxml

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

這里有一個坑要重點(diǎn)提一下,在官方給出的在父組件中調(diào)用子組件時,給其添加綁定事件使用的是 bind:increment 的形式,但是親試之后,還是得用 bindincrement 的這種寫法才有用.這里的 increment 就是你在定義子組件時通過 triggerEvent 傳遞過來的事件名.

logs.js

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

分別點(diǎn)擊三個按鈕時可以看到數(shù)值上都有變化的,并且控制臺輸出的 e.detail 中也有對應(yīng)的 num 屬性.

后語

通過一個簡單的小案例,小程序中的自定義事件在這里就介紹完了,學(xué)過vue.js的小伙會發(fā)現(xiàn)怎么感覺又學(xué)了一vue.js o(╥﹏╥)o 其實個人認(rèn)為官方文檔寫的還是不錯的,想學(xué)習(xí)小程序的同學(xué)也可以按著官方文檔上的說明進(jìn)行學(xué)習(xí).