首先子組件必須是自定義的組件.不能是page里邊創(chuàng)建的頁面.
父向子傳值
父組件代碼
<view>
<!-- 這里是父組件的wxml文件代碼 -->
<com1 msgAtoB="{{msgAtoB}}" ></com1>
<!--msgAtoB將父組件信息傳給子組件 -->
</view>
這里是父組件的json文件代碼
{
"component": true,
"usingComponents":{
"com1":"../../components/child2/child2"
這里要設置子組件的標簽名和子組件的相對路徑(復制代碼后將此行刪除,json文件不能有注釋)
}
}
這里是父組件的js文件代碼
Page({
data: {
msgAtoB: "這是父向子傳遞的信息",
},
hahaha:function(e){
this.setData({
msgBtoA: e.detail.msgBtoA
})
}
})
這里是子組件的wxml文件代碼
<view>
{{msgAtoB}}
</view>
這里是子組件的js文件代碼
Component({
properties:{
msgAtoB:{
type:String//設置父組件的數(shù)據(jù)格式
}
}
})
子向父傳值
父組件wxml代碼
<view>
<!-- 這里是父組件的wxml文件代碼 -->
<com1 msgAtoB="{{msgAtoB}}" bind:myevent="hahaha"></com1>
<!--msgAtoB將父組件信息傳給子組件 ,bind:myevent通過事件綁定來接收子組件的消息 -->
{{msgBtoA}}
</view>
這里是父組件的json文件代碼和之前一樣,無改動
這里是父組件的js文件代碼
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
msgAtoB: "這是父向子傳遞的信息",
msgBtoA:"這里接收兒子的信息"
},
hahaha:function(e){
this.setData({
msgBtoA: e.detail.msgBtoA
})
},
})
這里是子組件的wxml文件代碼
<view>
{{msgAtoB}}
<button bindtap='send'>按鈕</button>
{{msgBtoA}}
</view>
這里是子組件的js文件代碼
Component({
properties:{
msgAtoB:{
type:String//設置父組件的數(shù)據(jù)格式
}
},
data:{},
methods:{
send:function(){
this.triggerEvent("myevent", { msgBtoA:"兒子的信息傳過來了"})
}
},
})