在上一章節(jié)中我是給大家介紹了一下微信小程序的自定義組件,這一章我要說說小程序的另一個(gè)強(qiáng)大功能--自定義事 什么是自定義事件呢,你可以簡單的理解為:在觸發(fā)子組件的一些事件的時(shí)候,同時(shí)也能觸發(fā)父組件對(duì)應(yīng)的事件并對(duì)父組件中的某些數(shù)據(jù)進(jìn)行修改的事件就是自定義事件. 有翻閱學(xué)習(xí)過小程序官方給出的自定義組件教程的小伙們一定會(huì)有和我一樣想爆粗口的沖動(dòng)... 因?yàn)樯厦嬲f的真的有點(diǎn)亂... 不過沒事,今天在這里博主會(huì)詳細(xì)的講解講解微信小程序的自定義事件. 案例結(jié)構(gòu)
首先,我還是會(huì)以案例的形式向大家講解(這樣也能方便大家更好的理解)
在子組件cpt中有一個(gè)按鈕,按鈕上顯示的是當(dāng)前這按鈕組件存儲(chǔ)的數(shù)值counter. 父組件logs引用三個(gè)cpt子組件,在父組件有它自己的第一個(gè)變量total. 每點(diǎn)擊一次不同的按鈕都讓按鈕上的數(shù)值不同大小的增加, 同時(shí)total變量記錄的是三個(gè)按鈕的數(shù)值總和,如圖:
編寫子組件cpt.wxml
子組件cpt中有一個(gè)按鈕,按鈕添加點(diǎn)擊事件_incrementCounter,同時(shí)按鈕內(nèi)容顯示的是其數(shù)值counter cpt.js Component({ properties: { // 這里定義了num屬性,屬性值可以在組件使用時(shí)指定 num: { // num定義的就是點(diǎn)擊每個(gè)按鈕分別增加的數(shù)值,可以在調(diào)用組件的時(shí)候進(jìn)行更改 type: Number, value: 1 } }, data: { // 這里是一些組件內(nèi)部數(shù)據(jù) counter: 0 // counter定義的是每個(gè)按鈕上的數(shù)值 }, methods: { // 這里是一個(gè)自定義方法,每次點(diǎn)擊按鈕增加對(duì)應(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è)定自定義事件 { "navigationBarTitleText": "查看啟動(dòng)日志", "usingComponents": { "component-tag-name": "../components/cpt/cpt" } } logs.wxml
這里有一個(gè)坑要重點(diǎn)提一下,在官方給出的在父組件中調(diào)用子組件時(shí),給其添加綁定事件使用的是bind:increment的形式,但是親試之后,還是得用bindincrement的這種寫法才有用.這里的increment就是你在定義子組件時(shí)通過triggerEvent傳遞過來的事件名. logs.js Page({ data: { logs: [], total: 0, // 父組件中的數(shù)據(jù)total用以記錄三個(gè)按鈕總和 }, incrementTotal (e) { // 定義父組件的 console.log(e.detail) // 通過e.detail獲取點(diǎn)擊的那個(gè)對(duì)象 var num = e.detail.num this.setData({ total: this.data.total + e.detail.num }) }, }) 分別點(diǎn)擊三個(gè)按鈕時(shí)可以看到數(shù)值上都有變化的,并且控制臺(tái)輸出的e.detail中也有對(duì)應(yīng)的num屬性.
后語通過一個(gè)簡單的小案例,小程序中的自定義事件在這里就介紹完了,學(xué)過vue.js的小伙會(huì)發(fā)現(xiàn)怎么感覺又學(xué)了一vue.js o(╥﹏╥)o 其實(shí)個(gè)人認(rèn)為官方文檔寫的還是不錯(cuò)的,想學(xué)習(xí)小程序的同學(xué)也可以按著官方文檔上的說明進(jìn)行學(xué)習(xí). |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)