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

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

 更新時間：2019年05月05日 08:36:25   作者：_zengZeng  
這篇文章主要介紹了微信小程序自定義組件傳值 頁面和組件相互傳數(shù)據(jù)操作,結(jié)合實例形式分析了微信小程序常見傳值操作相關實現(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ù)啦~

當然 要想從頁面中帶數(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ù)設置成properties的屬性
 'show':{
  type:Boolean,
  value:'',
  observer: function (newVal, oldVal) {
  console.log(newVal)
  }
 },
 },
 ready:function(){
 console.log(this.properties);
 },

好啦  大功告成！

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

相關文章

最新評論