刚开始自学小程序,一边学一边总结,加油!
建议,有前段基础,框架基础的人,看,如果没有,you 可能看不太懂!
开始正题!
父传子
先来一段大白话理解一下
1、首先是如何在父组件中引入子组件
父组件中json中是这么写滴
{
"component": true, //设置component为true
"usingComponents": {
"componentB": "../child2/child2" //这个是引入子组件
}
}
2、第二步是在父组件wxml中使用子组件的模块
<view> //这个是父组件的内容
<view>子组件内容:</view>
<componentB customAttribute='我是A向B中传入的参数'/>
//这里customAttribute是自定义属性
</view>
这样的话父组件的任务就完成了
3、在子组件的js中先定义传过来的类型
Component({
behaviors: [],
properties: {
paramAtoB:String //声明父组件传过来的类型为string类型
},
data: {
}, // 这里放的是子组件的私有数据,可用于模版渲染
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
})
4、在父组件中直接使用就好了
<view>父组件中传来的参数:{{customAttribute}}</view>
至此子传父就算是完成了
子传父
个人理解,学过vue的人应该秒秒钟看懂小程序传参---可以说是一个妈生的
我们先从子组件开始
1、子组件wxml中需要一个事件触发一下,先绑定吧
<view>
<button bindtap='customEvent'>向A中传入参数</button>
//customEvent事件名--点击触发
</view>
2、子组件js中准备传参
Component({
behaviors: [],
properties: {
},
data: {
},
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
change:function(){
this.triggerEvent('myevent', { msg:123});
//这里的this.triggerEvent相当于一个发射器 发射一个事件给父组件
//(myevent)第一个参数是自定义事件,{msg:123}第二个参数是要传递的数据
}
}
})
3、父组件内如何接受
<componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/>
//在父组件的子模板上绑上子模板传过来的事件 (myevent)
//子组件点击事件后传到父组件,父组件所处理数据的事件onMyEvent
4、事件执行,通过e.detail.msg获取到子传递过来的数据
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据,可用于模版渲染
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
onMyEvent:function(e){
console.log(e.detail.msg) \\e.detail.paramBtoA这就是子传父传递过来的数据
}
}
})
如果有错或者其他分享欢迎留言
借鉴技术分享
借鉴-----菜鸟搬砖记
来源:CSDN
原文:https://blog.csdn.net/hope93/article/details/80803447
版权声明:本文为博主原创文章,转载请附上博文链接!
网友评论