首先子组件必须是自定义的组件.不能是page里边创建的页面.
父向子传值
父组件代码
<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//设置父组件的数据格式
}
}
})
子向父传值
父组件wxml代码
<view>
<!-- 这里是父组件的wxml文件代码 -->
<com1 msgAtoB="{{msgAtoB}}" bind:myevent="hahaha"></com1>
<!--msgAtoB将父组件信息传给子组件 ,bind:myevent通过事件绑定来接收子组件的消息 -->
{{msgBtoA}}
</view>
这里是父组件的json文件代码和之前一样,无改动
这里是父组件的js文件代码
Page({
/**
* 页面的初始数据
*/
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//设置父组件的数据格式
}
},
data:{},
methods:{
send:function(){
this.triggerEvent("myevent", { msgBtoA:"儿子的信息传过来了"})
}
},
})
