父组件传值给子组件
1:在父组件的json中导入子组件
"usingComponents": {
"diy-component": "/components/diy/index"
}
2:在页面应用组件
<diy-component diyItems="{{ items }}" bind:selectTab="onSelectTab"></diy-component>
3:在父组件中,子组件的引用处,绑定一个属性( diyItems),并传递想要给子组件的值( items ) , bind:selectTab="onSelectTab"为子组件传值给父组件的方位。
4:在子组件中的js中使用 properties 获取值,这样就可以在子组件中用 this.data.diyItems 获取到这个值了
Component({
data: {
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
diyItems: Object
},
methods:{
onSelectTab(e){
// 将值传给父组件
this.triggerEvent('selectTab', { tabindex: e.detail.tabindex });
},
},
})
子组件传值给父组件
1:子组件在需要传值时,使用triggerEvent传给父组件一个事件( selectTab),并传递想要给父组件的值( tabindex)
2: 在父组件中,子组件的引用处,通过这个 bind:selectTab事件绑定一个方法( onSelectTab)
3:在父组件的js中,定义这个方法onSelectTab,在这个方法内就可以获取到子组件传递过来的值了
onSelectTab(e){
let index = e.detail.tabindex
this.setData({
tabindex: index
})
}