前言

大家都知道在 vue 中，我們可以直接在點(diǎn)擊事件中放入傳遞的參數(shù)進(jìn)行傳參；然而微信小程序中并不適用這樣的寫法，但是微信小程序可以通過自定義屬性從而綁定參數(shù)使用。

data- 的用法

微信小程序可以通過直接寫 data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ，利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息。

<view bindtap="triggers" data-idType="1">點(diǎn)擊我</view>

注意：

data- 是固定的寫法，- 后面可以取任意的名字，但是需要強(qiáng)調(diào)的是在獲取的時候要寫相對應(yīng)的名字，例如：data-index = "1" ，獲取時就是 e.target.dataset.index 。

下面通過一個簡單的代碼小實(shí)例帶大家更直觀的了解 data- 的用法。

wxml文件

<!-- 按鈕觸發(fā)事件 -->
<view bindtap="triggers" data-idType="1">點(diǎn)擊我</view>

js文件

Page({
    data: {},
    //點(diǎn)擊事件
    triggers(e) {
        console.log(e.currentTarget.dataset.idtype); // 1
    },
})

如下圖：

為什么有些時候 target 中也可以取到值？

在事件處理中，e.target 和 e.currentTarget 分別表示事件的目標(biāo)元素和當(dāng)前元素。在某些情況下，特別是當(dāng)你綁定事件處理函數(shù)的元素包含子元素時，你可能會在 e.target 中找到你想要的值。

但是，需要注意的是，e.target 和 e.currentTarget 之間的區(qū)別很重要：

e.target 表示觸發(fā)事件的元素，即實(shí)際點(diǎn)擊的元素。
e.currentTarget 表示綁定事件處理程序的元素，即當(dāng)前元素。
在你的代碼中，點(diǎn)擊了或 元素，它們都是 e.currentTarget 的子元素，但事件實(shí)際上是在包含它們的元素上觸發(fā)的。因此，使用 e.currentTarget.dataset 更安全和可靠，因?yàn)樗偸且媚憬壎ㄊ录脑氐臄?shù)據(jù)屬性。

雖然在某些情況下 e.target 也可以包含你想要的數(shù)據(jù)，但為了代碼的可維護(hù)性和可讀性，最好使用 e.currentTarget 來獲取數(shù)據(jù)屬性的值，因?yàn)檫@更符合代碼的意圖和結(jié)構(gòu)。

當(dāng)綁定事件處理函數(shù)的元素包含子元素時，可以通過代碼來演示 e.target 和 e.currentTarget 之間的區(qū)別。以下是一個示例：

wxml文件

<view bindtap="handleClick" data-value="Parent">
    <image src="../../assets/cheliang.png" data-value="Child"></image>
</view>

js文件

Page({
  handleClick(e) {
    console.log(e.target.dataset.value); // 輸出子元素的值
    console.log(e.currentTarget.dataset.value); // 輸出父元素的值
  }
})

在這個示例中，有一個包含圖片的 <view> 元素，點(diǎn)擊圖片或 <view> 元素都會觸發(fā)相同的事件處理函數(shù)。在事件處理函數(shù)中，我們可以演示兩者的區(qū)別：

當(dāng)你點(diǎn)擊圖片時，e.target 表示圖片元素，因此 e.target.dataset.value 輸出子元素的值，即 『Child』。而 e.currentTarget 表示綁定事件的 元素，因此 e.currentTarget.dataset.value 輸出父元素的值，即 『Parent』。

這個示例清晰地展示了 e.target 和 e.currentTarget 之間的區(qū)別。e.target 始終表示觸發(fā)事件的元素，而 e.currentTarget 始終表示綁定事件的元素。

換一種方式來看

如下圖：

是拿不到 data-value 的值的。

到此這篇關(guān)于微信小程序通過點(diǎn)擊事件傳參（data-）的文章就介紹到這了,更多相關(guān)微信小程序傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論