小編給大家分享一下小程序開發(fā)中組件之間如何傳值，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在團(tuán)風(fēng)等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作專業(yè)公司,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),營銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,團(tuán)風(fēng)網(wǎng)站建設(shè)費(fèi)用合理。

1.創(chuàng)建組件

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

在wxml中：

我是組件A

在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中：

    微信小程序組件傳參
    

則組件就能夠顯示，要使得組件引入，先要在json中去給組件定義一下才可在wxml中顯示

3.父組件向子組件傳參

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

在A組件中引入B組件

在A組件的json中寫入：

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

在A組件的wxml中寫入：

我是組件A

   子組件內(nèi)容：
   

在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中寫入：

我是組件B
A中傳入的參數(shù)：{{paramAtoB}}

總結(jié)： A組件向B組件傳參，實(shí)際上就是在A組件中引入B組件的時(shí)候，帶上一個(gè)屬性paramAtoB，并且給其賦值，然后B組件通過這個(gè)屬性名稱paramAtoB，獲取其值

4.子組件向父組件傳參

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

要讓子組件給父組件傳參，首先得在父組件引入子組件的時(shí)候，加個(gè)觸發(fā)事件，如下：

在父組件A中wxml:

我是組件A

   A組件內(nèi)容：
   B組件傳入?yún)?shù)：{{paramBtoA}}
   

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:

我是組件B
A中傳入的參數(shù)：{{paramAtoB}}
  向A中傳入?yún)?shù)

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});
    }
  }

})

this.triggerEvent就是按鈕點(diǎn)擊之后執(zhí)行的事件，觸發(fā)myevent事件，傳入?yún)?shù)paramBtoA進(jìn)入父組件。

【小程序開發(fā)】組件之間傳值

1.創(chuàng)建組件

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

在wxml中：

我是組件A

在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中：

    微信小程序組件傳參
    

則組件就能夠顯示，要使得組件引入，先要在json中去給組件定義一下才可在wxml中顯示

3.父組件向子組件傳參

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

在A組件中引入B組件

在A組件的json中寫入：

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

在A組件的wxml中寫入：

我是組件A

   子組件內(nèi)容：
   

在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中寫入：

我是組件B
A中傳入的參數(shù)：{{paramAtoB}}

總結(jié)： A組件向B組件傳參，實(shí)際上就是在A組件中引入B組件的時(shí)候，帶上一個(gè)屬性paramAtoB，并且給其賦值，然后B組件通過這個(gè)屬性名稱paramAtoB，獲取其值

4.子組件向父組件傳參

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

要讓子組件給父組件傳參，首先得在父組件引入子組件的時(shí)候，加個(gè)觸發(fā)事件，如下：

在父組件A中wxml:

我是組件A

   A組件內(nèi)容：
   B組件傳入?yún)?shù)：{{paramBtoA}}
   

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:

我是組件B
A中傳入的參數(shù)：{{paramAtoB}}
  向A中傳入?yún)?shù)

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});
    }
  }

})

this.triggerEvent就是按鈕點(diǎn)擊之后執(zhí)行的事件，觸發(fā)myevent事件，傳入?yún)?shù)paramBtoA進(jìn)入父組件。

以上是“小程序開發(fā)中組件之間如何傳值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：小程序開發(fā)中組件之間如何傳值-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/dhopji.html