自定义组件-插槽
1.什么是插槽
在自定义组件的wxml结构中,可以提供一个<slot>
节点(插槽),用于承载组件使用者提供的wxml结构。
2.单个插槽
在小程序中,默认每个自定义组件中只允许一个<slot>
进行占位,这种个数上的限制叫做单个插槽。
<!-- 组件的封装者 --><view class="wrapper"><view>这里是组件的内部节点</view><!-- 对于不确定的内容,可以使用一个<slot>进行占位,具体内容由组件的使用者决定 --><slot></sslot></view><component-tag-name><!-- 这部分内容将被放置在组件 <slot> 的位置上 --><view>这里是插入到组件slot中的内容</view></component-tag-name>
3.启用多个插槽
在小程序的自定义组件中,需要使用多<slot>
插槽时,可以在组件的.js文件中,通过如下方式进行启用。
示例代码如下:
Component({options:{multiplesSlots:true // 在组件定义时选项中启用多slot支持},properties:{/* */},methods:{/**/}})
4.定义多个插槽
可以在组件的.wxml中使用多个<slot>
标签,以不同的name来区分不同的插槽。示例代码如下:
<!-- 组件模板 --><view class="wrapper"><!-- name 为 before 的第一个 slot 插槽 --><slot name="before"></slot><view>这是一段固定的文本内容</view><!-- name 为 after 的第二个 slot 插槽 --><slot name="after"></slot></view>
5.使用多个插槽
在使用带有多个插槽的自定义组件时,需要用slot属性来将节点插入到不同的<slot>
中。示例代码如下:
<!-- 引用组件的页面模板 --><component-tag-name><!-- 这部分内容将被放置在组件 <slot name="before">的位置上 --><view slot="before">这里是插入到组件slot name="before"</view><!-- 这部分内容将被放置在组件 <slot name="after">的位置上 --><view slot="after">这里是插入到组件slot name="after"</view></component-tag-name>