微信小程式子元件向父元件傳值的兩個方法
阿新 • • 發佈:2020-10-16
第一種方法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: '《風雲1》《風雲2》' }] }, myevent(e) { // 這裡就是子元件傳過來的內容了 console.log(e.detail.params) } })
第二種方法
頁面佈局和上面是一樣的
.list 是子元件的class 名
// home.js 父元件的js
Page({
onShow() {
const instance = this.selectComponent('.list');
// 打印出來的就是list 元件的例項了,這樣就可以獲取到子元件所有的資料了!
// 注意!這裡也可以呼叫setData 等方法直接修改元件的值
console.log(instance)
}
})
轉:https://blog.csdn.net/qq_39557024/article/details/104844351