11. slot插槽

slot标签其实就是一个占位符 插槽

等到父组件调用子组件的时候再传递标签过来，最终这些被传递的标签就会替换slot插槽的位置

子组件页面：

<!--components/Tabs.wxml-->
<view class="tabs">
    <view class="tabs_title">
        <view
             wx:for="{{tabs}}"
             wx:key="id"
             data-index="{{index}}"
             class="title_item {{item.isActive?'active':''}}"
             bindtap="handleItemTap">{{item.name}}</view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

子组件js

// pages/demoComponent/demoComponent.js
Page({
  data: {
    tabs: [
      {
        id: 1,
        name: '首页',
        isActive: true
      }, {
        id: 2,
        name: '原创',
        isActive: false
      }, {
        id: 3,
        name: '分类',
        isActive: false
      }, {
        id: 4,
        name: '关于',
        isActive: false
      }
    ]
  },
  handleItemChange(e){
    console.log('handleItemChange')
    console.log(e)
    console.log(e.detail.index)
    const {index} = e.detail;
    let {tabs} = this.data;
    tabs.forEach((v,i)=> {
      i === index ? v.isActive = true : v.isActive = false;
    })

    this.setData({
      tabs
    })
  }
})

父组件json

{
  "usingComponents": {
    "Tabs": "../../components/Tabs/Tabs"
  }
}

父组件js

// pages/demoComponent/demoComponent.js
Page({
  data: {
    tabs: [
      {
        id: 1,
        name: '首页',
        isActive: true
      }, {
        id: 2,
        name: '原创',
        isActive: false
      }, {
        id: 3,
        name: '分类',
        isActive: false
      }, {
        id: 4,
        name: '关于',
        isActive: false
      }
    ]
  },
  handleItemChange(e){
    console.log('handleItemChange')
    console.log(e)
    console.log(e.detail.index)
    const {index} = e.detail;
    let {tabs} = this.data;
    tabs.forEach((v,i)=> {
      i === index ? v.isActive = true : v.isActive = false;
    })

    this.setData({
      tabs
    })
  }
})

父组件页面

<!--pages/demoComponent/demoComponent.wxml-->
<view>pages/demoComponent/demoComponent.wxml</view>
<view>1.父组件（页面）向子组件传递数据通过标签属性的方式来传递</view>
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
    <view hidden="{{tabs[0].isActive?false:true}}">这里是父组件往子组件插槽中传递的内容1</view>
    <view hidden="{{tabs[1].isActive?false:true}}">这里是父组件往子组件插槽中传递的内容2</view>
    <view hidden="{{tabs[2].isActive?false:true}}">这里是父组件往子组件插槽中传递的内容3</view>
    <view hidden="{{tabs[3].isActive?false:true}}">这里是父组件往子组件插槽中传递的内容4</view>
</Tabs>