微信小程序自定義組件傳值 頁面和組件相互傳數據操作示例
本文實例講述了微信小程序自定義組件傳值 頁面和組件相互傳數據操作。分享給大家供大家參考,具體如下:
要想在組件中調到頁面中的方法,并且想要組件中傳數據到頁面去,emmmm,可以醬紫:
用組件事件 triggerEvent!
首先,在頁面中定義組件 ,json文件中記得加上:
{
"usingComponents": {
"user-btn": "/pages/component/userInfo/userInfo"
}
},
然后,index.wxml~
index.wxml
...
<user-btn show="{{userShow}}" bind:showTab="showTab"></user-btn>
...
到了組建:
// 與頁面銜接 觸發(fā)頁面中的方法并傳數據
this.triggerEvent('showTab', res.data);
res.data就是組件中請求到的數據;
回到index.js,他的showTab方法~
showTab:function(e){
console.log('this is showtabBar');
console.log(e.detail);
},
那么這個e.detail就能獲取到組件中的res.data的數據啦~
當然 要想從頁面中帶數據到組件:
譬如剛剛index.wxml中的show,在頁面中的index.js可以隨意控制userShow的值:
index.wxml
...
<user-btn show="{{userShow}}" bind:showTab="showTab"></user-btn>
...
然后在組建中,便可以這樣取到我們從頁面中傳入的值。
properties: { //對外屬性,即如果外部的wxml文件傳入數據時,會把數據設置成properties的屬性
'show':{
type:Boolean,
value:'',
observer: function (newVal, oldVal) {
console.log(newVal)
}
},
},
ready:function(){
console.log(this.properties);
},
好啦 大功告成!
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關文章
Web 開發(fā)中Ajax的Session 超時處理方法
下面小編就為大家?guī)硪黄猈eb 開發(fā)中Ajax的Session 超時處理方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
uniapp小程序自定義tabbar以及初次加載閃屏解決方法
Uniapp小程序可以通過自定義tabbar來實現更加個性化的界面設計,下面這篇文章主要給大家介紹了關于uniapp小程序自定義tabbar以及初次加載閃屏解決方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-05-05

