- 插槽的使用场景:
- 一个自定义组件,可能被页面多处复用,但每处可能需要显示的内容不一样。组件中的某一部分,可能在页面某位置使用时不需要显示,但在其他位置又可能需要它的显示,以上需求,可用slot插槽来实现。
- 使用方法:
- 把slot标签写在组件里,根据外部(页面)传来的标签,控制插槽内容的显示和隐藏。
- 如果需要显示想要的内容,就传递相应的标签进来,如果不想显示,就不需要传递。
- 做好标签插入之后,记得在组件的Component属性列表里启用插槽。
- slot作用:
- 提高了组件的灵活性和复用性。
举个?:
页面中(或父组件中)插入需要的标签–wxml:
<view class="container">
<!-- 使用自定义组件(v-tag为自定义组件名称) -->
<v-tag text="text">
<!-- 插入组件中的标签(这里的slot为组件里所定义的插槽名字) -->
<text slot="after">{{ nums }}</text>
</v-tag>
</view>
自定义组件–wxml:
<view class="container">
<text>{{ text }}</text>
<!-- 文本后方插入(after为插槽的名字) -->
<slot name="after"></slot>
</view>
在自定义组件的Component属性列表里启用插槽–js:
Component({
/**
* 组件的属性列表
*/
options: { // 启用插槽
multipleSlots: true
},
properties: { // 开放数据
text: String
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
使用插槽前的效果:
使用插槽后的效果:
声明:上图每个文本标签均为一个自定义组件,标签尾部的数字,是我们使用插槽传进去的text标签。