目錄

步驟一：按鈕的創(chuàng)建

步驟二：按鈕屬性配置

步驟三：添加點擊事件

步驟四：參數(shù)傳遞

步驟五：打印數(shù)據(jù)

步驟六：獲取數(shù)據(jù)

步驟七：父進(jìn)程驗證

總結(jié)：data-*自定義數(shù)據(jù)和mark-自定義數(shù)據(jù)的區(qū)別

---

????????事件傳參：在觸發(fā)事件時,將一些數(shù)據(jù)作為參數(shù)傳遞給事件處理函數(shù)的過程,就是事件傳參。

? ? ? ? 在微信小程序中,我們經(jīng)常會在組件上添加一些自定義數(shù)據(jù),然后在事件處理函數(shù)中獲取這些自定義數(shù)據(jù),從而完成業(yè)務(wù)邏輯的開發(fā)。

? ? ? ? 上一章我們了解到，在組件上通過data-"的方式定義需要傳遞的數(shù)據(jù)，其中*是自定義的屬性,例如: <view data-id="100" bindtap="handier"/>然后通過事件對象進(jìn)行獲取自定義數(shù)據(jù)。

零基礎(chǔ)手把手教你創(chuàng)建微信小程序（十六）·事件傳參·data-*自定義數(shù)據(jù)-CSDN博客

? ? ? ? 本章我們講解另一種方法，小程序進(jìn)行事件傳參的時候，除了使用 data-* 屬性傳遞參數(shù)外，還可以使用 mark 標(biāo)記傳遞參數(shù)mark是一種自定義屬性，可以在組件上添加，用于來識別具體觸發(fā)事件的target節(jié)點。

????????同時mark還可以用于承載一些自定義數(shù)據(jù)在組件上使用 mark:自定義屬性 的方式將數(shù)據(jù)傳遞給事件處理函數(shù)。

????????例如： <view mark:id="100" bindtap="handler"/>然后通過事件對象進(jìn)行獲取自定義數(shù)據(jù)

步驟一：按鈕的創(chuàng)建

? ? ? ? 找到購物車頁面，找到其文件路徑，快速找到cart.wxml文件，編寫代碼，創(chuàng)建一個按鈕：

<view><button>按鈕</button>
</view>

步驟二：按鈕屬性配置

? ? ? ? 找打上一配置的cate.scss文件將其中的內(nèi)容復(fù)制粘貼到cart.scss文件中，配置按鈕相關(guān)屬性：

view{display: flex;height: 300rpx;background-color: skyblue;align-items: center;
}

步驟三：添加點擊事件

? ? ? ? 在cart.wxml文件中創(chuàng)建一個名為“bluHandler”的點擊事件：

<view><button bind:tap="btuHandler">按鈕</button>
</view>

步驟四：參數(shù)傳遞

????????如果需要使用?mark?進(jìn)行事件傳參，如果需要使用?mark：自定義屬性的方式進(jìn)行參數(shù)傳遞：

<view><!-- 如果需要使用 mark 進(jìn)行事件傳參，如果需要使用 mark：自定義屬性的方式進(jìn)行參數(shù)傳遞 --><button bind:tap="btuHandler" mark:id="1" mark:name="tom">按鈕</button>
</view>

步驟五：打印數(shù)據(jù)

? ? ? ? 找到cart.js文件，對按鈕綁定事件進(jìn)行處理：

Page({// 按鈕綁定的事件處理函數(shù)btuHandler(event){console.log(event)}
})

步驟六：獲取數(shù)據(jù)

Page({// 按鈕綁定的事件處理函數(shù)btuHandler(event){console.log(event.mark.id)console.log(event.mark.name)}
})

步驟七：父進(jìn)程驗證

? ? ? ? 找到cart.wxml對view添加事件：

<view bind:tap="parentHandler" mark:parentid="1" mark:parentname="tom"><!-- 如果需要使用 mark 進(jìn)行事件傳參，如果需要使用 mark：自定義屬性的方式進(jìn)行參數(shù)傳遞 --><!-- <button bind:tap="btuHandler" mark:id="1" mark:name="tom">按鈕</button> --><button mark:id="1" mark:name="tom">按鈕</button>
</view>

? ? ? ? 在找到cart.js文件，對view創(chuàng)建的事件，讀取：

? ? ? ? 首先點擊藍(lán)色區(qū)域（不點擊按鈕）：

Page({// 按鈕綁定的事件處理函數(shù)btuHandler(event){console.log(event.mark.id)console.log(event.mark.name)},//view 綁定的事件處理函數(shù)parentHandler(event){//先點擊藍(lán)色區(qū)域// 通過事件對象獲取的是 view 身上綁定的數(shù)據(jù)console.log(event)}
})

? ? ? ? 點擊按鈕（不點擊藍(lán)色區(qū)域）：

Page({// 按鈕綁定的事件處理函數(shù)btuHandler(event){console.log(event.mark.id)console.log(event.mark.name)},//view 綁定的事件處理函數(shù)parentHandler(event){//先點擊藍(lán)色區(qū)域// 通過事件對象獲取的是 view 身上綁定的數(shù)據(jù)// 先點擊按鈕(不點擊藍(lán)色區(qū)域)console.log(event)}
})

總結(jié)：data-*自定義數(shù)據(jù)和mark-自定義數(shù)據(jù)的區(qū)別

對于 data-*自定義數(shù)據(jù)：

點擊藍(lán)色區(qū)域（不點擊按鈕）

? ? ? ? currentTarget 事件綁定者：view

? ? ? ? target 事件觸發(fā)者：view

不點擊藍(lán)色區(qū)域（點擊按鈕） ? ??

? ? ? ? currentTarget 事件綁定者：view

? ? ? ? target 事件觸發(fā)者：按鈕

如果想獲取 view 身上的數(shù)據(jù)，就必須使用 currentTarget 才可以。

如果想獲取的是時間觸發(fā)者本身數(shù)據(jù)，就需要使用 target。

對于 mark-自定義數(shù)據(jù)：

點擊藍(lán)色區(qū)域（不點擊按鈕）

????????通過事件對象獲取的是 view 身上綁定的數(shù)據(jù)

不點擊藍(lán)色區(qū)域（點擊按鈕）

通過事件對象獲取到的是 觸發(fā)事件的節(jié)點 以及父節(jié)點身上的所有 mark 數(shù)據(jù)

微信小程序開發(fā)_時光の塵的博客-CSDN博客