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

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

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

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

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

用組件事件 triggerEvent！

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

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

然后，index.wxml~

index.wxml

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

到了組建：

// 與頁面銜接 觸發(fā)頁面中的方法并傳數(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)然要想從頁面中帶數(shù)據(jù)到組件：

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

index.wxml

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

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

 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ì)大家微信小程序開發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

顏色漸變效果
[藍(lán)色]顏色漸變效果...
2006-07-07
什么是cookie?js手動(dòng)創(chuàng)建和存儲(chǔ)cookie
cookie 是存儲(chǔ)于訪問者的計(jì)算機(jī)中的變量，在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)訪問者名字的 cookie,需要的朋友可以參考下
2014-05-05
javascript編程實(shí)現(xiàn)棧的方法詳解【經(jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了javascript編程實(shí)現(xiàn)棧的方法,簡(jiǎn)單說明了棧的概念、特點(diǎn)并結(jié)合實(shí)例形式分析了javascript棧的定義、入棧、出棧等操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
微信小程序頁面跳轉(zhuǎn)傳值實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序頁面跳轉(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元素來進(jìn)行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個(gè)HTML元素,可以通過JavaScript來操作和繪制圖形,本文示例實(shí)現(xiàn)js和canvas繪制圓形金屬質(zhì)感的詩詞高級(jí)排版特效
2024-09-09
微信小程序自動(dòng)客服功能
微信小程序最近比較熱，今天小編抽空做了一個(gè)客服機(jī)器人的小程序，下面小編給大家分享微信小程序自動(dòng)客服功能，需要的朋友參考下吧
2017-11-11
js阻止冒泡及jquery阻止事件冒泡示例介紹
JQuery 提供了兩種方式來阻止事件冒泡，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