亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序子組件向父組件傳值的兩種方法

 更新時間:2024年09月09日 14:30:54   作者:九億少女無法觸及的夢?  
本文介紹了微信小程序中子組件向父組件傳值的兩種方法,這兩種方法都能有效地實(shí)現(xiàn)子組件向父組件的數(shù)據(jù)傳遞,對于開發(fā)微信小程序的開發(fā)者來說,掌握這些技巧非常重要,感興趣的朋友跟隨小編一起看看吧

第一種方法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)文章

最新評論