本篇文章給大家?guī)淼膬?nèi)容是關(guān)于小程序開發(fā)之組件之間的傳值方法（代碼示例），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

1.創(chuàng)建組件

打開微信開發(fā)者工具，創(chuàng)建組件，會(huì)生成四個(gè)文件：wxml,wxss,js,json

在wxml中：

<view>我是組件A</view>

在js中：

Component({  behaviors: [],  properties: {     },  data: {    }, // 私有數(shù)據(jù)，可用于模版渲染  // 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在methods段中定義的方法名  attached: function () { },  moved: function () { },  detached: function () { },  methods: {     }})

在json中：

{  "component": true,  "usingComponents": {}}

即組件創(chuàng)建完成

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>子組件內(nèi)容：</view>   <componentB paramAtoB='我是A向B中傳入的參數(shù)'/></view>

在B組件的js中寫入：

Component({  behaviors: [],  properties: {    paramAtoB:String  },  data: {  }, // 私有數(shù)據(jù)，可用于模版渲染  // 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在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組件傳參，實(shí)際上就是在A組件中引入B組件的時(shí)候，帶上一個(gè)屬性paramAtoB，并且給其賦值，然后B組件通過這個(gè)屬性名稱paramAtoB，獲取其值

4.子組件向父組件傳參

聲明：A組件為父組件，B組件為子組件，以下是B組件向A組件傳參：

要讓子組件給父組件傳參，首先得在父組件引入子組件的時(shí)候，加個(gè)觸發(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ù)，或一個(gè)在methods段中定義的方法名  attached: function () { },  moved: function () { },  detached: function () { },  methods: {    onMyEvent:function(e){      this.setData({        paramBtoA: e.detail.paramBtoA      })    }  }})

onMyEvent就是當(dāng)被子組件觸發(fā)時(shí)的函數(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按鈕點(diǎn)擊事件一觸發(fā)，就可以傳入?yún)?shù)進(jìn)入父組件A中，在子組件B中js:

Component({  behaviors: [],  properties: {    paramAtoB:String  },  data: {  }, // 私有數(shù)據(jù)，可用于模版渲染  // 生命周期函數(shù)，可以為函數(shù)，或一個(gè)在methods段中定義的方法名  attached: function () { },  moved: function () { },  detached: function () { },  methods: {    change:function(){      this.triggerEvent('myevent', { paramBtoA:123});    }  }})              
              

            
小程序