刚开始接触微信小程序,给大家详细讲解一下父子通信,如果有更好的意见请大家私信我,大家一起在这枯燥的生活中探讨代码😉,好话不多说,进入正题
父传子:
在你的父文件夹下的.json文件下引入子组件
代码:
{
"usingComponents": {
"music": "../../component/music/music"
/*这是定义的组件名字*/ /*这是我子组件的路径*/
}
}
然后在父组件里 以标签的形式写入子组件,传值的话在标签上自定义属性名,属性值要以双花括号保住
<music list='{{list}}'></music>
然后在子组件中使用Component构造器,他在Page外面使用
Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。
在Component的properties中接收父组件传过来的数据
Component({
properties: {
list: { // 属性名
type: Object, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: '标题' // 属性初始值(可选),如果未指定则会根据类型选择一个
}
}
})
这样子组件就能接受的父组件传过来的值了在子组件的wxml中用双花括号引用就ok了
<text>{{list.title}}</text>
这里我的子组件中的方法都写在了Component构造器中,用methods包裹住
methods: {
//这里只是个例子,大家不用在意
switch(res) {
if (res.statusCode !== 200) {
this.setData({
hidden: true
})
}
}
}
子传父:
子传父运用了triggerEvent()
this.triggerEvent("up",res) //第一个是自定义事件名,第二个是要传递的值(可以为空)
自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项。
然后在父组件中的子组件标签中绑定自定义事件
<music
id='music'
list='{{list}}'
bind:up="_up"
>
</music>
在父组件中的js文件里获取子组件传过来的值,这里的自定义方法要写在Component构造器中的methods里,因为我写在Page中他不会被触发,所以我就试了下他会在Component中被触发
methods: {
_up(e) { //e为子组件传过来的值
console.log(e.detail.data)
this.setData({
list: e.detail.data //这里是改变Page中data上的值
})
}
}
好了组件通信到此完毕,请大家多多关照