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>