微信小程序：父子間組件傳參

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

})

this.triggerEvent就是按鈕點擊以後執行的事件，觸發myevent事件，傳入參數paramBtoA進入父組件

以上就是微信小程序父子組件之間的傳參，後期若是有新發現會不按期更新！

源碼地址：https://github.com/CandyGo/wx...