微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解
在事件處理函數(shù)中為data中的數(shù)據(jù)賦值
通過調(diào)用this.setData(dataObject)方法，可以給頁面data中的數(shù)據(jù)重新賦值，示例如下：
hacker.wxml
<button type="primary" bindtap="CountChange">+1 按鈕</button>
hacker.js
Page({
data:{
count:0
},
// +1按鈕的點(diǎn)擊事件處理函數(shù)
CountChange(){
this.setData({
count:this.data.count + 1
})
}
})
事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數(shù)傳遞參數(shù)，例如，下面的代碼不能正常運(yùn)行：
<button type="primary" bindtap='btnHandler(123456)'>事件傳參</button>
因為小程序會把bindtap的屬性值統(tǒng)一當(dāng)做事件名稱來處理，相當(dāng)于調(diào)用一個名稱為btnHandler(123456)的事件處理函數(shù)。
可以為組件提供data-自定義屬性傳參，其中代表的是參數(shù)的名字，示例如下：
info：參數(shù)名字
2：參數(shù)值
<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">事件傳參</button>
在事件處理函數(shù)中，通過event.target.dataset.參數(shù)名即可獲取具體的參數(shù)值，示例代碼如下：
btnHandler(event){
// dataset是一個對象，包含所有通過data-*傳來的參數(shù)項
console.log(event.target.dataset)
// 通過dataset可以訪問具體的參數(shù)值
console.log(event.target.dataset.info)
},代碼如下：
hacker.js
Page({
data:{
count:0
},
btnHandler(e){
this.setData({
count:this.data.count + e.target.dataset.info
})
},
})
hacker.wxml
<button type="primary" bindtap="btnHandler" data-info="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{2}}">+2按鈕</button>運(yùn)行結(jié)果如下：
bindinput的語法格式
在小程序中，通過input事件來響應(yīng)文本框的輸入事件，語法格式如下：
①通過bindinput，可以為文本框綁定輸入事件
<input bindinput="inputHandler"></input>
②在頁面的.js文件中定義事件處理函數(shù)
Page({
inputHandler(e){
// e.detail.value 是變化過后，文本框的最新值
console.log(e.detail.value)
}
})
運(yùn)行結(jié)果如下：
實現(xiàn)文本框和data之間的數(shù)據(jù)同步
實現(xiàn)步驟
①定義數(shù)據(jù)
Page({
data:{
msg:'你好,'
},
})
②渲染結(jié)構(gòu)
<input value="{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{msg}}" bindinput="iptHandler"></input>③美化格式
input{
border:1px solid #eee;
padding:5px;
margin:5px;
border-radius:3px;
}
④綁定input事件處理函數(shù)
iptHandler(e){
this.setData({
// 通過e.detail.value 獲取文本框最新值
msg:e.detail.value
})
}
運(yùn)行結(jié)果如下：
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解的文章就介紹到這了,更多相關(guān)小程序事件傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架的安裝使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
想必大家都知道，JavaScrip是全棧開發(fā)語言，瀏覽器，手機(jī)，服務(wù)器端都可以看到JS的身影。 本文會分享一些高效的JavaScript的最佳實踐，提高大家對JS的底層和實現(xiàn)原理的理解，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript中解決多瀏覽器兼容性23個問題的快速解決方法
下面小編就為大家?guī)硪黄狫avaScript中解決多瀏覽器兼容性23個問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
Javascript 修改String 對象 增加去除空格功能(示例代碼)
這篇文章主要介紹了Javascript 修改String 對象 增加去除空格功能(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作
在 JavaScript 中,處理嵌套對象或數(shù)組時,經(jīng)常會遇到空值檢查的問題,傳統(tǒng)的空值檢查通常比較繁瑣,容易導(dǎo)致代碼冗長且難以閱讀,ES2020 引入了可選鏈操作符 (?.),極大地簡化了這些檢查過程,本文介紹了JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作2024-12-12
這篇文章主要介紹了p5.js入門教程之圖片加載,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了百度小程序自定義通用toast組件,百度小程序的toast僅支持在頁中展示，不能自定義位置、字體大小、在單個文本中增加icon等需求；因此自定義一個全局可通用的Toast,需要的朋友可以參考下2019-07-07
JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
這篇文章主要介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風(fēng)格，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2015-12-12
ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
這篇文章主要介紹了ES6中javascript實現(xiàn)函數(shù)綁定及類的事件綁定功能,結(jié)合實例形式分析了ES6中函數(shù)綁定及類的事件綁定原理、實現(xiàn)方法、相關(guān)操作技巧與注意事項,需要的朋友可以參考下2017-11-11
JavaScript語句可以不以;結(jié)尾的煩惱...2007-03-03