一、父组件给子组件传值
分三步
1父组件定义变量;
2父组件传递变量;
3子组件接收变量;
一、定义、传递变量
Page({
data: {
tabsList:[
{ id:1, name:'一一', isActive:true, },
{ id:2, name:'二二', isActive:false, },
{ id:3, name:'三三', isActive:false, },
{ id:4, name:'四四', isActive:false, }
]
},
})
// 传递变量
<Tabs tabsList="{{tabsList}}"></Tabs>
三、子组件接收、使用变量
Component({
properties: { // properties 接受一个 Object 类型的参数。
tabsList:{
type:Array,
value:[],
}
},
})
// 使用变量
<view wx:for="{{tabsList}}" wx:key="id" >
{{item.name}}
</view>
定义段 | 类型 | 是否必填 | 描述 最低版本 |
---|---|---|---|
type | 是 | 属性的类型 | |
optionalTypes | Array | 否 | 属性的类型(可以指定多个) |
value | 否 | 属性的初始值 | |
observer | Function | 否 | 属性值变化时的回调函数 |
二、子组件向父组件传值 triggerEvent
- 重点在于父组件传递给子组件的方法名称要加上
【bind父组件提供的方法名称】 - 子组件调用时 需要 this.triggerEvent(’【父组件提供的方法名称】’,参数)
this.triggerEvent(‘myevent’, myEventDetail, myEventOption)
一、父组件定义函数方法A
Page({
data: {},
// 定义函数方法
fn1(e){
const { active, } = e.detail;
}
})
// 父组件传递 注意**
<Tabs bindFn2="fn1"></Tabs>
三、子组件调用、并传入参数
<button bindtap="tabclick">点击传参</button>
// 子组件调用自己的方法
Component({
methods: {
tabclick(){
const active = {}; // 参数
this.triggerEvent('Fn2',{ active, }) // 传入参数
}
}
})