微信小程序自定義組件傳值頁(yè)面和組件相互傳數(shù)據(jù)操作示例

更新時(shí)間：2019年05月05日 08:36:25 作者：_zengZeng

這篇文章主要介紹了微信小程序自定義組件傳值頁(yè)面和組件相互傳數(shù)據(jù)操作,結(jié)合實(shí)例形式分析了微信小程序常見(jiàn)傳值操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序自定義組件傳值頁(yè)面和組件相互傳數(shù)據(jù)操作。分享給大家供大家參考，具體如下：

要想在組件中調(diào)到頁(yè)面中的方法，并且想要組件中傳數(shù)據(jù)到頁(yè)面去，emmmm，可以醬紫：

用組件事件 triggerEvent！

首先，在頁(yè)面中定義組件，json文件中記得加上：

{
 "usingComponents": {
 "user-btn": "/pages/component/userInfo/userInfo"
 }
},

然后，index.wxml~

index.wxml

...
<user-btn show="{{userShow}}" bind:showTab="showTab"></user-btn>
...

到了組建：

// 與頁(yè)面銜接 觸發(fā)頁(yè)面中的方法并傳數(shù)據(jù)
this.triggerEvent('showTab', res.data);

res.data就是組件中請(qǐng)求到的數(shù)據(jù)；

回到index.js，他的showTab方法~

 showTab:function(e){
  console.log('this is showtabBar');
  console.log(e.detail);
 },

那么這個(gè)e.detail就能獲取到組件中的res.data的數(shù)據(jù)啦~

當(dāng)然要想從頁(yè)面中帶數(shù)據(jù)到組件：

譬如剛剛index.wxml中的show，在頁(yè)面中的index.js可以隨意控制userShow的值：

index.wxml

...
<user-btn show="{{userShow}}" bind:showTab="showTab"></user-btn>
...

然后在組建中，便可以這樣取到我們從頁(yè)面中傳入的值。

 properties: { //對(duì)外屬性，即如果外部的wxml文件傳入數(shù)據(jù)時(shí)，會(huì)把數(shù)據(jù)設(shè)置成properties的屬性
 'show':{
  type:Boolean,
  value:'',
  observer: function (newVal, oldVal) {
  console.log(newVal)
  }
 },
 },
 ready:function(){
 console.log(this.properties);
 },

好啦大功告成！

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

顏色漸變效果
[藍(lán)色]顏色漸變效果...
2006-07-07
什么是cookie?js手動(dòng)創(chuàng)建和存儲(chǔ)cookie
cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量，在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)訪問(wèn)者名字的 cookie,需要的朋友可以參考下
2014-05-05
javascript編程實(shí)現(xiàn)棧的方法詳解【經(jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了javascript編程實(shí)現(xiàn)棧的方法,簡(jiǎn)單說(shuō)明了棧的概念、特點(diǎn)并結(jié)合實(shí)例形式分析了javascript棧的定義、入棧、出棧等操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
微信小程序頁(yè)面跳轉(zhuǎn)傳值實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序頁(yè)面跳轉(zhuǎn)傳值實(shí)現(xiàn)代碼的相關(guān)資料,這里分析實(shí)現(xiàn)的條件及實(shí)例代碼，需要的朋友可以參考下
2017-07-07
js Canvas繪制圓形時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了js Canvas繪制圓形時(shí)鐘效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
DOM中事件處理概覽與原理的全面解析
這篇文章主要為大家詳細(xì)解析了DOM中事件處理概覽與原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
js和canvas繪制圓形金屬質(zhì)感特效
在JavaScript中,可以使用HTML5提供的Canvas元素來(lái)進(jìn)行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個(gè)HTML元素,可以通過(guò)JavaScript來(lái)操作和繪制圖形,本文示例實(shí)現(xiàn)js和canvas繪制圓形金屬質(zhì)感的詩(shī)詞高級(jí)排版特效
2024-09-09
微信小程序自動(dòng)客服功能
微信小程序最近比較熱，今天小編抽空做了一個(gè)客服機(jī)器人的小程序，下面小編給大家分享微信小程序自動(dòng)客服功能，需要的朋友參考下吧
2017-11-11
js阻止冒泡及jquery阻止事件冒泡示例介紹
JQuery 提供了兩種方式來(lái)阻止事件冒泡，Jquery阻止默認(rèn)動(dòng)作即通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作，下文有個(gè)不錯(cuò)的示例，需要的朋友可以參考下
2013-11-11
擁抱模塊化的JavaScript
模塊化JavaScript的概念尤為強(qiáng)烈，似乎有趕超07年Ajax風(fēng)潮之趨勢(shì)
2012-03-03