微信小程序子組件向父組件傳值的兩種方法
第一種方法triggerEvent() 方法
triggerEvent方法用法類似于Vue中的emit()
// list.wxml 組件 <view> <block wx:for="{{data}}" wx:key="*this"> <view class="box-list"> <view class="title">{{item.title}}</view> <view class="content"> <view>{{item.content}}</view> <view class="btn"> <button type="primary" size="mini" bindtap="handleTap" data-index="{{index}}">傳值</button> </view> </view> </view> </block> </view>
// list 組件 js Component({ // 從父組件接收的data 會自動同步到 子組件的data 對象里面 properties: { data: { type: Array, value: [] } }, methods: { handleTap(e) { let { index } = e.currentTarget.dataset; let data = this.data.data; // 自定義一個事件,并且傳值 this.triggerEvent('myevent',{params: data[index]},{}) }, } })
home.wxml 父組件
<view> <list bindmyevent="myevent" data="{{list}}" class="list"></list> </view> Page({ data: { list:[{ title: '薛之謙', content: '《演員》《你還要我怎樣》' },{ title: '第二夢', content: '《風(fēng)云1》《風(fēng)云2》' }] }, myevent(e) { // 這里就是子組件傳過來的內(nèi)容了 console.log(e.detail.params) } })
第二種方法
頁面布局和上面是一樣的
.list 是子組件的class 名
// home.js 父組件的js Page({ onShow() { const instance = this.selectComponent('.list'); // 打印出來的就是list 組件的實(shí)例了,這樣就可以獲取到子組件所有的數(shù)據(jù)了! // 注意!這里也可以調(diào)用setData 等方法直接修改組件的值 console.log(instance) } })
到此這篇關(guān)于微信小程序子組件向父組件傳值的兩種方法的文章就介紹到這了,更多相關(guān)微信小程序子組件向父組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js中如何把字符串轉(zhuǎn)化為對象、數(shù)組示例代碼
在本文為大家介紹下把字符串轉(zhuǎn)化為對象:把文本轉(zhuǎn)化為對象、把文本轉(zhuǎn)化為數(shù)組,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07JavaScript實(shí)現(xiàn)廣告的關(guān)閉與顯示效果實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)廣告的關(guān)閉與顯示效果,涉及javascript廣告窗口的關(guān)閉與顯示效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-07-07webpack實(shí)現(xiàn)一個行內(nèi)樣式px轉(zhuǎn)vw的loader示例
這篇文章主要介紹了webpack實(shí)現(xiàn)一個行內(nèi)樣式px轉(zhuǎn)vw的loader示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09僅IE6/7/8中innerHTML返回值忽略英文空格的問題
僅IE6/7/8中innerHTML返回值忽略英文空格的問題,需要此問題的朋友可以參考下。2011-04-04javascript跳轉(zhuǎn)與返回和刷新頁面的實(shí)例代碼
這篇文章主要介紹了javascript跳轉(zhuǎn)與返回和刷新頁面的實(shí)例代碼,簡單介紹了javascript中window.open()與window.location.href的區(qū)別,感興趣的朋友一起看看吧2019-11-11JavaScript中常用的3種彈窗(警告框、確認(rèn)框、提示框)
JavaScript提供了幾種常用的彈窗方法,用于與用戶進(jìn)行交互或顯示提示消息,這篇文章主要給大家介紹了關(guān)于JavaScript中常用的3種彈窗的相關(guān)資料,分別包括警告框、確認(rèn)框、提示框,需要的朋友可以參考下2023-09-09