微信小程序父子之间的传值,插槽slot

2,907 阅读1分钟

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标签里面我们放置了一个容器。里面填充了数据