線上服務咨詢
Article/文章
記錄成長點滴 分享您我感悟
小程序開發之組件之間的傳值方法（代碼示例）
本篇文章給大家帶來的內容是關于小程序開發之組件之間的傳值方法（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
1.創建組件
打開微信開發者工具，創建組件，會生成四個文件：wxml,wxss,js,json
在wxml中：
<view>我是組件A</view>
在js中：
Component({ behaviors: [], properties: { }, data: { }, // 私有數據，可用于模版渲染 // 生命周期函數，可以為函數，或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { }})在json中：
{ "component": true, "usingComponents": {}}即組件創建完成
2.引入組件要在index中引入組件，則
在index.json中：
{ "usingComponents": { "componentA": "../../components/child1/child1" }}在index.wxml中：
<view> <view>微信小程序組件傳參</view> <componentA /></view>
則組件就能夠顯示，要使得組件引入，先要在json中去給組件定義一下才可在wxml中顯示
3.父組件向子組件傳參聲明：A組件為父組件，B組件為子組件，以下是A組件向B組件傳參：
在A組件中引入B組件
在A組件的json中寫入：
{ "component": true, "usingComponents": { "componentB": "../child2/child2" }}在A組件的wxml中寫入：
<view>我是組件A</view><view> <view>子組件內容：</view> <componentB paramAtoB='我是A向B中傳入的參數'/></view>
在B組件的js中寫入：
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有數據，可用于模版渲染 // 生命周期函數，可以為函數，或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { }})即在properties中定義A組件要傳過來的參數類型
在B組件的wxml中寫入：
<view style='border:2px solid gray;'><view style='text-align:center;'>我是組件B</view><view>A中傳入的參數：{{paramAtoB}}</view></view>總結： A組件向B組件傳參，實際上就是在A組件中引入B組件的時候，帶上一個屬性paramAtoB，并且給其賦值，然后B組件通過這個屬性名稱paramAtoB，獲取其值
4.子組件向父組件傳參聲明：A組件為父組件，B組件為子組件，以下是B組件向A組件傳參：
要讓子組件給父組件傳參，首先得在父組件引入子組件的時候，加個觸發事件，如下：
在父組件A中wxml:
<view style='padding:20px;border:2px solid red;'><view style='text-align:center;'>我是組件A</view><view> <view>A組件內容：</view> <view>B組件傳入參數：{{paramBtoA}}</view> <componentB paramAtoB='我是A向B中傳入的參數' bind:myevent="onMyEvent"/></view></view>myevent就是綁定的觸發事件
在父組件A中js:
Component({ behaviors: [], properties: { }, data: { }, // 私有數據，可用于模版渲染 // 生命周期函數，可以為函數，或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { onMyEvent:function(e){ this.setData({ paramBtoA: e.detail.paramBtoA }) } }})onMyEvent就是當被子組件觸發時的函數
在子組件B中wxml:
<view style='border:2px solid gray;'><view style='text-align:center;'>我是組件B</view><view>A中傳入的參數：{{paramAtoB}}</view> <button bindtap='change'>向A中傳入參數</button></view>button按鈕點擊事件一觸發，就可以傳入參數進入父組件A中，在子組件B中js:
Component({ behaviors: [], properties: { paramAtoB:String }, data: { }, // 私有數據，可用于模版渲染 // 生命周期函數，可以為函數，或一個在methods段中定義的方法名 attached: function () { }, moved: function () { }, detached: function () { }, methods: { change:function(){ this.triggerEvent('myevent', { paramBtoA:123}); } }})
小程序
