微信小程式官方文件對這部分已經有了說明：
元件間的基本通訊方式有以下幾種。
WXML 資料繫結：用於父元件向子元件的指定屬性設定資料，僅能設定 JSON 相容資料（自基礎庫版本 2。0。9 開始，還可以在資料中包含函式）。具體在 元件模板和樣式 章節中介紹。
事件：用於子元件向父元件傳遞資料，可以傳遞任意資料。
如果以上兩種方式不足以滿足需要，父元件還可以透過
this。selectComponent
方法獲取子元件例項物件，這樣就可以直接訪問元件的任意資料和方法。
但是對於初學者來說有些難以理解，下面我們一步一步來給大家解釋。
1。父元件（頁面）傳值給子元件（含呼叫子元件的方法）
1.1 方法1——利用子元件屬性傳遞動態資料
模板資料繫結
與普通的 WXML 模板類似，可以使用資料繫結，這樣就可以向子元件的屬性傳遞動態資料。
程式碼示例：
在以上例子中，元件的屬性
propA
和
propB
將收到頁面傳遞的資料。頁面可以透過
setData
來改變繫結的資料欄位。
注意：這樣的資料繫結只能傳遞 JSON 相容資料。自基礎庫版本 2。0。9 開始，還可以在資料中包含函式（但這些函式不能在 WXML 中直接呼叫，只能傳遞給子元件）。
下面我們用例項程式碼來詳細說明，不囉嗦，上程式碼。
頁面程式碼
<！——index。wxml——>
頁面js程式碼
//index。js
//獲取應用例項
const app = getApp（）
Page（{
data：{
dadVal1：“父元件資料1”，
}，
}）
元件程式碼
<！——components/modal/modal。wxml——>
元件js程式碼
// components/modal/modal。js
Component（{
/**
* 元件的屬性列表
*/
properties： {
sonVal1： {
type： “string” ，
value： “”
}，
}，
}）
注意
：
頁面中 son-val1 與元件js中 sonVal1 表示的是一個變數，至於為什麼會這麼寫請參考es5/es6中變數書寫規範。
自定義屬性 sonVal1 的資料目前接受的型別包括：String， Number， Boolean， Object， Array， null（表示任意型別）
透過以上程式碼我們就可以將父元件（頁面）中的 dadVal1 的值賦給子元件中的變數（自定義屬性） sonVal1。
1.2 方法2——利用
this.selectComponent
獲取子元件例項物件，從而進行傳值和呼叫方法
頁面程式碼
<！——index。wxml——>
頁面js程式碼
//index。js
//獲取應用例項
const app = getApp（）
Page（{
data：{
dadVal2： “父元件資料2”，
}，
// 方法2將父元件的值傳給子元件
sendValToSon2：function（）{
// 使用選擇器選擇元件例項節點，返回匹配到元件例項物件
let modal = this。selectComponent（‘#modal’）；
// 給子元件資料重新賦值
modal。setData（{
sonVal2：this。data。dadVal2
}）
}，
// 呼叫子元件方法（可以與方法2合併使用）
getFuncFromSon：function（）{
// 使用選擇器選擇元件例項節點，返回匹配到元件例項物件
let modal = this。selectComponent（‘#modal’）；
// 呼叫子元件方法
modal。changeState（）；
}，
}）
元件程式碼
<！——components/modal/modal。wxml——>
元件js程式碼
// components/modal/modal。js
Component（{
properties： {}，
/**
* 元件的初始資料
*/
data： {
sonVal2：“”，
state：“否”，
}，
/**
* 元件的方法列表
*/
methods： {
changeState：function（）{
this。setData（{
state：“是”
}）
}，
}）
透過上面的程式碼我們成功將父元件（頁面 ）的變數 dadVal2 的值賦給子元件的變數 sonVal2 ，也成功的呼叫了子元件的方法 changeState（）
2。子元件傳值給父元件（頁面）（含呼叫父元件的方法）
先看官方文件
監聽事件
事件系統是元件間通訊的主要方式之一。自定義元件可以觸發任意的事件，引用元件的頁面可以監聽這些事件。關於事件的基本概念和用法，參見 事件。
監聽自定義元件事件的方法與監聽基礎元件事件的方法完全一致：
程式碼示例：
Page（{
onMyEvent（e） {
e。detail // 自定義元件觸發事件時提供的detail物件
}
}）
觸發事件
自定義元件觸發事件時，需要使用
triggerEvent
方法，指定事件名、detail物件和事件選項：
程式碼示例：
在開發者工具中預覽效果
Component（{
properties： {}，
methods： {
onTap（） {
const myEventDetail = {} // detail物件，提供給事件監聽函式
const myEventOption = {} // 觸發事件的選項
this。triggerEvent（‘myevent’， myEventDetail， myEventOption）
}
}
}）
官方文件寫的已經很詳細了，我們來寫個例項驗證一下
頁面程式碼
<！——index。wxml——>
頁面js程式碼
//index。js
//獲取應用例項
const app = getApp（）
Page（{
data：{
sonVal：“”
}，
// e。detail是子元件傳過來的資料物件
getSonVal：function（e）{
this。setData（{
sonVal： e。detail。val
}）
}
}）
元件程式碼
<！——components/modal/modal。wxml——>
元件js程式碼
// components/modal/modal。js
Component（{
/**
* 元件的屬性列表
*/
properties： { }，
/**
* 元件的初始資料
*/
data： {
sonVal：“子元件資料”
}，
/**
* 元件的方法列表
*/
methods： {
// 觸發myevent事件
sendValToDad：function（）{
var myEventDetail = {
val： this。data。sonVal
}
this。triggerEvent（‘myevent’， myEventDetail）
}
}
}）
注意
父元件（頁面）呼叫子元件時會繫結一個監聽事件 bindmyevent=“getSonVal” ，也可以寫成 bind：myevent=“getSonVal”
觸發事件的選項見官方文件
當監聽到子元件中 myevent 事件觸發是會觸發父元件（頁面）中的 getSonVal 方法，以此完成子元件對父元件方法的呼叫； getSonVal 方法中e。detail是子元件傳過來的資料物件及子元件中的 myEventDetail 變數，透過這種形式將子元件中的資料傳遞到父元件。
完整程式碼見 https：//github。com/kyle-yangkai/-/tree/master/wx-test