您好,登錄后才能下訂單哦!
小編給大家分享一下小程序開發(fā)中組件之間如何傳值,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1.創(chuàng)建組件
打開微信開發(fā)者工具,創(chuàng)建組件,會生成四個文件:wxml,wxss,js,json
在wxml中:
<view>我是組件A</view>
在js中:
Component({ behaviors: [], properties: { }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
在json中:
{ "component": true, "usingComponents": {} }
即組件創(chuàng)建完成
要在index中引入組件,則
在index.json中:
{ "usingComponents": { "componentA": "../../components/child1/child1" } }
在index.wxml中:
<view> <view>微信小程序組件傳參</view> <componentA /> </view>
則組件就能夠顯示,要使得組件引入,先要在json中去給組件定義一下才可在wxml中顯示
聲明:A組件為父組件,B組件為子組件,以下是A組件向B組件傳參:
在A組件中引入B組件
在A組件的json中寫入:
{ "component": true, "usingComponents": { "componentB": "../child2/child2" } }
在A組件的wxml中寫入:
<view>我是組件A</view> <view> <view>子組件內(nèi)容:</view> <componentB paramAtoB='我是A向B中傳入的參數(shù)'/> </view>
在B組件的js中寫入:
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
即在properties中定義A組件要傳過來的參數(shù)類型
在B組件的wxml中寫入:
<view style='border:2px solid gray;'> <view style='text-align:center;'>我是組件B</view> <view>A中傳入的參數(shù):{{paramAtoB}}</view> </view>
總結(jié): A組件向B組件傳參,實際上就是在A組件中引入B組件的時候,帶上一個屬性paramAtoB,并且給其賦值,然后B組件通過這個屬性名稱paramAtoB,獲取其值
聲明:A組件為父組件,B組件為子組件,以下是B組件向A組件傳參:
要讓子組件給父組件傳參,首先得在父組件引入子組件的時候,加個觸發(fā)事件,如下:
在父組件A中wxml:
<view style='padding:20px;border:2px solid red;'> <view style='text-align:center;'>我是組件A</view> <view> <view>A組件內(nèi)容:</view> <view>B組件傳入?yún)?shù):{{paramBtoA}}</view> <componentB paramAtoB='我是A向B中傳入的參數(shù)' bind:myevent="onMyEvent"/> </view> </view>
myevent就是綁定的觸發(fā)事件
在父組件A中js:
Component({ behaviors: [], properties: { }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { onMyEvent:function(e){ this.setData({ paramBtoA: e.detail.paramBtoA }) } } })
onMyEvent就是當被子組件觸發(fā)時的函數(shù)
在子組件B中wxml:
<view style='border:2px solid gray;'> <view style='text-align:center;'>我是組件B</view> <view>A中傳入的參數(shù):{{paramAtoB}}</view> <button bindtap='change'>向A中傳入?yún)?shù)</button> </view>
button按鈕點擊事件一觸發(fā),就可以傳入?yún)?shù)進入父組件A中,在子組件B中js:
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { change:function(){ this.triggerEvent('myevent', { paramBtoA:123}); } } })
this.triggerEvent就是按鈕點擊之后執(zhí)行的事件,觸發(fā)myevent事件,傳入?yún)?shù)paramBtoA進入父組件。
打開微信開發(fā)者工具,創(chuàng)建組件,會生成四個文件:wxml,wxss,js,json
在wxml中:
<view>我是組件A</view>
在js中:
Component({ behaviors: [], properties: { }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
在json中:
{ "component": true, "usingComponents": {} }
即組件創(chuàng)建完成
要在index中引入組件,則
在index.json中:
{ "usingComponents": { "componentA": "../../components/child1/child1" } }
在index.wxml中:
<view> <view>微信小程序組件傳參</view> <componentA /> </view>
則組件就能夠顯示,要使得組件引入,先要在json中去給組件定義一下才可在wxml中顯示
聲明:A組件為父組件,B組件為子組件,以下是A組件向B組件傳參:
在A組件中引入B組件
在A組件的json中寫入:
{ "component": true, "usingComponents": { "componentB": "../child2/child2" } }
在A組件的wxml中寫入:
<view>我是組件A</view> <view> <view>子組件內(nèi)容:</view> <componentB paramAtoB='我是A向B中傳入的參數(shù)'/> </view>
在B組件的js中寫入:
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { } })
即在properties中定義A組件要傳過來的參數(shù)類型
在B組件的wxml中寫入:
<view style='border:2px solid gray;'> <view style='text-align:center;'>我是組件B</view> <view>A中傳入的參數(shù):{{paramAtoB}}</view> </view>
總結(jié): A組件向B組件傳參,實際上就是在A組件中引入B組件的時候,帶上一個屬性paramAtoB,并且給其賦值,然后B組件通過這個屬性名稱paramAtoB,獲取其值
聲明:A組件為父組件,B組件為子組件,以下是B組件向A組件傳參:
要讓子組件給父組件傳參,首先得在父組件引入子組件的時候,加個觸發(fā)事件,如下:
在父組件A中wxml:
<view style='padding:20px;border:2px solid red;'> <view style='text-align:center;'>我是組件A</view> <view> <view>A組件內(nèi)容:</view> <view>B組件傳入?yún)?shù):{{paramBtoA}}</view> <componentB paramAtoB='我是A向B中傳入的參數(shù)' bind:myevent="onMyEvent"/> </view> </view>
myevent就是綁定的觸發(fā)事件
在父組件A中js:
Component({ behaviors: [], properties: { }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { onMyEvent:function(e){ this.setData({ paramBtoA: e.detail.paramBtoA }) } } })
onMyEvent就是當被子組件觸發(fā)時的函數(shù)
在子組件B中wxml:
<view style='border:2px solid gray;'> <view style='text-align:center;'>我是組件B</view> <view>A中傳入的參數(shù):{{paramAtoB}}</view> <button bindtap='change'>向A中傳入?yún)?shù)</button> </view>
button按鈕點擊事件一觸發(fā),就可以傳入?yún)?shù)進入父組件A中,在子組件B中js:
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有數(shù)據(jù),可用于模版渲染 // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { change:function(){ this.triggerEvent('myevent', { paramBtoA:123}); } } })
this.triggerEvent就是按鈕點擊之后執(zhí)行的事件,觸發(fā)myevent事件,傳入?yún)?shù)paramBtoA進入父組件。
以上是“小程序開發(fā)中組件之間如何傳值”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。