快捷導(dǎo)航

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

更新時(shí)間：2024年09月09日 14:30:54 作者：九億少女無(wú)法觸及的夢(mèng)?

本文介紹了微信小程序中子組件向父組件傳值的兩種方法,這兩種方法都能有效地實(shí)現(xiàn)子組件向父組件的數(shù)據(jù)傳遞,對(duì)于開發(fā)微信小程序的開發(fā)者來(lái)說(shuō),掌握這些技巧非常重要,感興趣的朋友跟隨小編一起看看吧

第一種方法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 會(huì)自動(dòng)同步到 子組件的data 對(duì)象里面
	properties: {
		data: {
			type: Array,
			value: []
		}
	},
	methods: {
	 handleTap(e) {
      let { index } = e.currentTarget.dataset;
      let data = this.data.data;
      // 自定義一個(gè)事件，并且傳值
      this.triggerEvent('myevent',{params: data[index]},{})
    },
	}
})

home.wxml 父組件

<view>
	<list bindmyevent="myevent" data="{{list}}" class="list"></list>
</view>
Page({
	data: {
		list:[{
      title: '薛之謙',
      content: '《演員》《你還要我怎樣》'
    },{
      title: '第二夢(mèng)',
      content: '《風(fēng)云1》《風(fēng)云2》'
    }]
	},
	myevent(e) {
	// 這里就是子組件傳過(guò)來(lái)的內(nèi)容了
		console.log(e.detail.params)
	}
})

第二種方法

頁(yè)面布局和上面是一樣的
.list 是子組件的class 名

// home.js 父組件的js
Page({
	onShow() {
		const instance = this.selectComponent('.list');
		// 打印出來(lái)的就是list 組件的實(shí)例了，這樣就可以獲取到子組件所有的數(shù)據(jù)了！
		// 注意！這里也可以調(diào)用setData 等方法直接修改組件的值
		console.log(instance)
	}
})

到此這篇關(guān)于微信小程序子組件向父組件傳值的兩種方法的文章就介紹到這了,更多相關(guān)微信小程序子組件向父組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

網(wǎng)頁(yè)前臺(tái)通過(guò)js非法字符過(guò)濾代碼(罵人的話等等)
項(xiàng)目中如果需要過(guò)濾非法字符(你不想用戶輸入的任何字符)的話在前臺(tái)可以使用js過(guò)濾,同樣可以提高用戶體驗(yàn)，以前都是后臺(tái)過(guò)濾，這樣雙重過(guò)濾用戶體驗(yàn)更好。
2010-05-05
整理關(guān)于Bootstrap表單的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap表單的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
javascript 表格左右收縮
javascript 表格左右收縮實(shí)現(xiàn)代碼。
2009-07-07
uni-app路由配置文件pages.json平臺(tái)化拆分
這篇文章主要為大家介紹了uni-app路由配置文件pages.json平臺(tái)化拆分示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
如何判斷鼠標(biāo)是否在DIV的區(qū)域內(nèi)
通過(guò)mouseover，mouseout來(lái)觸發(fā)事件，才判斷鼠標(biāo)是否在該區(qū)域。但是這種方法的局限性就是，必須要觸發(fā)mouseover，或mouseout，mouseleave事件才能知道
2013-11-11
JavaScript?裝飾器模式用法詳解
裝飾器模式（Decorator?Pattern）是一種結(jié)構(gòu)型設(shè)計(jì)模式，它允許動(dòng)態(tài)地向一個(gè)對(duì)象添加新的行為，本文將帶大家詳細(xì)了解一下JavaScript裝飾器模式，文中有相關(guān)的示例代碼供大家參考，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)
2023-05-05
JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
深入學(xué)習(xí)JS?XML和Fetch請(qǐng)求
這篇文章主要介紹了深入學(xué)習(xí)JS?XML和Fetch請(qǐng)求，文章通過(guò)圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-09-09
JavaScript中的內(nèi)存泄漏的原因
本文主要介紹了聊一聊JavaScript中的內(nèi)存泄漏，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
自己使用js/jquery寫的一個(gè)定制對(duì)話框控件
自己做一個(gè)通用的控件，雖然不是絕對(duì)通用啦，但在我這個(gè)項(xiàng)目里還是可以隨意調(diào)用的，思想的話也可以借鑒到別的項(xiàng)目中
2014-05-05