什么是插槽:
在自定义组件的WXML结构中,可以提供一个节点(插槽),用于承载组件使用者提供的WXML结构
单个插槽:
在小程序1中,默认每个自定义组件中只允许使用一个进行占位,这种个数上的限制叫做单个插槽
被引用到的组件,这里是使用slot进行占位:
<view>
<view>
这里是组件的内部结构
</view>
<slot></slot>
</view>
引用组件,这里引用组件的内部代码会被填充到被引用组件的slot标签位置:
<!--index.wxml-->
<view>
这里是index页面
</view>
<myTest1>
<view>
这是通过插槽填充的内容
</view>
</myTest1>
run:
启用多个插槽:
在小程序的自定义组件中,需要使用多插槽时,可以在组件的.js文件中,通过如下方式启用:
示例代码如下:
// components/myTest1/myTest1.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
options: {
// 在组件自定义时的选项中启用多slot支持
multipleSlots: true
}
})
定义多个插槽:
可以在组件的.wxml中使用多个标签,以不同的name来区分不同的插槽,示例代码如下:
<view>
<view>
这里是组件的内部结构
</view>
<!-- 组件的第一个插槽 -->
<slot name="before"> </slot>
<view>
这是一段固定的文本内容
</view>
<!-- 这是第二个插槽 -->
<slot name="after"></slot>
</view>
多插槽的使用:
<myTest1>
<view slot="before">
这是通过插槽填充的内容
</view>
<view slot="after">
这是通过插槽填充的内容
</view>
</myTest1>
run: