小程序父子組件互相傳參，互相調用方法

在這里我們使用page作為頁面，使用com作為組件

先巴拉巴拉開始工作，1、小程序根目錄新建一個components文件件，然后在其中新建一個com文件夾，然后新建組件。com.json中“component":true,其中組件還可以繼續使用子組件，組件套組件，不要太頭大！！！"usingComponents": {}，

2、在需要使用組件的page頁面的page.json中定義"usingComponents":{"組件名”：“路徑”}

3、使用組件名作為標簽名，在需要使用的wxml中寫入<組件名><組件名/>

 

父組件向子組件傳值

1、在組件的properties中聲明一個參數，值是個對象，有type（類型）和默認值兩個參數.

在com.js文件中

  properties: {
      parentTochild:{type:String}
  }

 

2、在頁面中調用子組件的自定義標簽中使用‘變量名’=‘變量值’的寫法（要傳遞變量時，使用{{}}），就將父組件中的參數傳遞給了子組件

在page.wxml中

<com parentTochild="向子組件傳遞的字符串，同時也可以使用{{parentdata}}來傳遞父組件data中的參數"></com>  

3、子組件在需要使用父組件傳遞的參數的地方使用雙大括號就可以直接使用該參數。

在com.wxml中

<text>父組件向子組件傳遞的{{parentTochild}}</text>

這樣子組件就接收到父組件傳遞給自己的參數了；

 

 

 

子組件向父組件傳值（該方法同樣是子組件調用父組件）

//這個比較麻煩，太惡心了，可能是我腦子笨，想了好久才想明白

1、在組件的標簽中綁定方法名，觸發事件。在子組件中聲明一個‘自定義方法’，如有處理參數邏輯將邏輯寫在方法上面，在方法的最下面使用this.triggerEvent

('子組件的自定義方法名',‘參數1’，‘參數2’)向父組件傳遞自定義方法及參數，元素上的自定義data參數可在函數中使用e.currentTarget.dataset參數接收。

 

 

com.js中

toParent(e){
      const index = e.currentTarget.dataset.index
      this.triggerEvent('toParent',index)
    },

2、在需要使用的標簽上綁定事件，如在button上綁定該自定義方法button bindtap="自定義方法名" button。

com.wxml中

<button bindtap="toParent" data-index="3">向父組件傳遞參數，調用其方法</button>

 

3、在父頁面中綁定自定義事件（bind子組件自定義事件名）=‘父組件的方法名’。

page.wxml中

<com bindtoParent="toParent" id="test"></com>   //bind后面的toParent就是子組件向父組件映射來的方法。后面的那個""中的toParent是父組件自己的方法

 

4、在父組件中定義接收子組件方法的方法，也就是說，使用子組件的方法就是接收子組件返回的參數，使用e.detail來接收子組件傳遞的參數

page.js中

toParent(e){   //在這里可以做一些父組件的方法，同時父組件也接收到了子組件向父組件傳遞過來的參數
    this.setData({
      fromChild:e.detail.index
    })

 

 

父組件調用子組件的方法

//這個方法應該是沒什么很大的用處，純粹處女心理想要記下來。

 

1、使用組件時將組件帶上id，在生命周期onready中使用this.子組件名 = this.selectComponent("#子組件id")

com.js中

childMethod(title){
      wx.showToast({
        title
      })
    }

 

page.wxml

<com id="test"></com>  

page.js中

onReady(){
    this.com = this.selectComponent("#test")
  },

 

2、在需要使用子組件方法的地方使用this.子組件名.子組件方法()

page.wxml

<button bindtap="showChildMethod">點擊調用子組件的方法</button>

page.js

showCHildMethod(){
    this.com.childMethod(childMethod是要調用的子組件的方法)
  }