欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年05月05日 08:36:25   作者：_zengZeng  
這篇文章主要介紹了微信小程序自定義組件傳值 頁面和組件相互傳數(shù)據(jù)操作,結(jié)合實例形式分析了微信小程序常見傳值操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了微信小程序自定義組件傳值 頁面和組件相互傳數(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就是組件中請求到的數(shù)據(jù)；

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

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

那么這個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: { //對外屬性，即如果外部的wxml文件傳入數(shù)據(jù)時，會把數(shù)據(jù)設(shè)置成properties的屬性
 'show':{
  type:Boolean,
  value:'',
  observer: function (newVal, oldVal) {
  console.log(newVal)
  }
 },
 },
 ready:function(){
 console.log(this.properties);
 },

好啦  大功告成！

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

相關(guān)文章

  • Web 開發(fā)中Ajax的Session 超時處理方法

    Web 開發(fā)中Ajax的Session 超時處理方法

    下面小編就為大家?guī)硪黄猈eb 開發(fā)中Ajax的Session 超時處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-01-01
  • Javascript檢查圖片大小不要讓大圖片撐破頁面

    Javascript檢查圖片大小不要讓大圖片撐破頁面

    用Javascript判斷圖片大小，其實只要寫一個簡單的函數(shù)就可以了，使用其他語言進行判斷，過程比較復(fù)雜，用 Javascript 判斷輕松搞定
    2014-11-11
  • uniapp小程序自定義tabbar以及初次加載閃屏解決方法

    uniapp小程序自定義tabbar以及初次加載閃屏解決方法

    Uniapp小程序可以通過自定義tabbar來實現(xiàn)更加個性化的界面設(shè)計,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序自定義tabbar以及初次加載閃屏解決方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • 由?JavaScript?的?with?引發(fā)的探索

    由?JavaScript?的?with?引發(fā)的探索

    這篇文章主要介紹了由?JavaScript?的?with?引發(fā)的探索，js?的?with?是為對象訪問提供命名空間式的訪問方式，with?創(chuàng)建一個對象的命名空間，在這個命名空間內(nèi)你可以直接訪問對象的屬性，而不需要通過對象來訪問，下面一起來了解更多詳細(xì)內(nèi)容吧
    2022-01-01
  • JS自定義混合Mixin函數(shù)示例

    JS自定義混合Mixin函數(shù)示例

    這篇文章主要介紹了JS自定義混合Mixin函數(shù),涉及javascript面向?qū)ο蟪绦蛟O(shè)計中函數(shù)與屬性操作相關(guān)技巧,需要的朋友可以參考下
    2016-11-11
  • js監(jiān)聽鼠標(biāo)點擊和鍵盤點擊事件并自動跳轉(zhuǎn)頁面

    js監(jiān)聽鼠標(biāo)點擊和鍵盤點擊事件并自動跳轉(zhuǎn)頁面

    這篇文章主要介紹了js監(jiān)聽鼠標(biāo)點擊(onmousedown)和鍵盤點擊(onkeydown)事件并自動跳轉(zhuǎn)頁面，很簡單的一個實現(xiàn)
    2014-09-09
  • javascript比較兩個日期相差天數(shù)的方法

    javascript比較兩個日期相差天數(shù)的方法

    這篇文章主要介紹了javascript比較兩個日期相差天數(shù)的方法,涉及javascript針對日期的轉(zhuǎn)換與比較的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • JS實現(xiàn)駝峰字符串轉(zhuǎn)下劃線字符串的三種方法

    JS實現(xiàn)駝峰字符串轉(zhuǎn)下劃線字符串的三種方法

    這篇文章主要介紹了js下劃線和駝峰互相轉(zhuǎn)換的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2023-11-11
  • js添加刪除行和雙擊變文本框的腳本

    js添加刪除行和雙擊變文本框的腳本

    發(fā)現(xiàn)我JS真的還有很多要學(xué)，下面只是我的練習(xí)作品，代碼很多是網(wǎng)上的。
    2008-07-07
  • 淺談一種讓小程序支持JSX語法的新思路

    淺談一種讓小程序支持JSX語法的新思路

    這篇文章主要介紹了淺談一種讓小程序支持JSX語法的新思路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06

最新評論