微信小程式官方文件對這部分已經有了說明:
元件間的基本通訊方式有以下幾種。
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