微信小程式自定義事件

LinDaiDai發表於2017-11-14
微信小程式事件

前文

在上一章節中我是給大家介紹了一下微信小程式的自定義元件,這一章我要說說小程式的另一個強大功能--自定義事件

什麼是自定義事件呢,你可以簡單的理解為:在觸發子元件的一些事件的時候,同時也能觸發父元件對應的事件並對父元件中的某些資料進行修改的事件就是自定義事件.

有翻閱學習過小程式官方給出的自定義元件教程的小夥們一定會有和我一樣想爆粗口的衝動...

因為上面說的真的有點亂...

不過沒事,今天在這裡博主會詳細的講解講解微信小程式的自定義事件.

案例結構

首先,我還是會以案例的形式向大家講解(這樣也能方便大家更好的理解)
簡單介紹一下案例專案的內容(以上一章自定義元件的案例為基礎)
專案名稱:component
自定義子元件cpt
父元件:logs

component1.png
component1.png

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

父元件logs引用三個cpt子元件,在父元件有它自己的第一個變數total.

每點選一次不同的按鈕都讓按鈕上的數值不同大小的增加,

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

logs.wxml.png
logs.wxml.png

編寫子元件

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 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>複製程式碼

這裡有一個坑要重點提一下,在官方給出的在父元件中呼叫子元件時,給其新增繫結事件使用的是bind:increment的形式,但是親試之後,還是得用bindincrement的這種寫法才有用.這裡的increment就是你在定義子元件時通過triggerEvent傳遞過來的事件名.

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屬性.

result.png
result.png

後語

通過一個簡單的小案例,小程式中的自定義事件在這裡就介紹完了,學過vue.js的小夥會發現怎麼感覺又學了一遍vue.js o(╥﹏╥)o 其實個人認為官方文件寫的還是不錯的,想學習小程式的同學也可以按著官方文件上的說明進行學習.

相關文章