父组件向子组件传参
父组件向子组件传参,类似于Vue的prop传递参数
//先在子组件当中定义好要接收的参数
//properties就是小程序当中接收父组件传递参数的地方,类似于vue的prop
properties: {
// 接收父组件传过来的数据
// 属性名字必须和父组件那边的一样,和vue的prop传参类似
tabs:{
// 接收参数的类型
type:Array,
// 接收参数的默认值
value:[]
}
},
再在父组件当中把需要的参数传过来
//tabs就是子组件接收的属性名字,{{tabs}}就是父组件向子组件传递的参数
<tabs tabs="{{tabs}}"></tabs>
子组件向父组件传递参数
子组件向父组件传递参数,类似于Vue当中的事件总线传参
//methods当中定义一个方法,当中触发了这个方法的时候,向父组件传递参数
handelActive(e){
let {index} = e.currentTarget.dataset
// 子组件向父组件传递参数
// this.triggerEvent,相当于Vue的事件总线,
//传递两个参数,第一个参数是自定义事件的名称,第二个参数是传递给父组件的参数
this.triggerEvent("itemChange",{index})
}
父组件接收子组件传递的数据
// 通过自定义事件来接收
<tabs binditemChange="handelChange"></tabs>
在父组件的js代码当中对传递的参数进行处理
handelChange(e){
// 获取子组件传过来的参数
let {index} = e.detail
// 通过子组件传过来的参数来改变父组件的值
let {tabs} = this.data
for(let item in tabs){
if(tabs[item].id == index){
tabs[item].isActive = true
}else{
tabs[item].isActive = false
}
}
this.setData({
tabs
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},