1 父传子
2 子传父
在子组件的wxml文件中
<view class="tabs_item {{item.isActive?'active':''}}"
wx:for="{{tabs}}" wx:key="index" data-index="{{index}}" bindtap="handleTab">
{{item.name}}
</view>
有一个点击事件handleTab 然后在子组件的js文件中的methods方法中写此点击事件,然后进行传值
methods: {
handleTab(e){
// 子传父
// this.triggerEvent("父组件自定义事件的名称",要传递的参数)
//将index值传递给父组件
const {index} = e.target.dataset;
this.triggerEvent("itemChange",{index});
}
}
在父组件中我们要接受传递过来的值
首先:在父组件的wxml文件中,我们通过bind+'传递过来的事件名'进行事件接收(binditemChange)
在父组件的js文件中我们就可以使用handleItemChange事件进行接收
通过e事件接收传递过来的index值
3 插槽 slot
在子组件Tabs.wxml文件中我们定义一个插槽
在父组件demo06.wxml中,我们放置一个容器用来填充数据
在Tab标签里面我们放置了一个容器。里面填充了数据