1、插槽:在自定义组件的 wxml 结构中,可以提供一个 <slot> 节点(插槽),用于承载组件使用者提供的 wxml 结构。
2.单个插槽
在小程序中,默认每个自定义组件中只允许使用一个 <slot> 进行占位,这种个数上的限制叫做单个插槽。
//在组件.wxml中这样定义<view><view>这里是外部内容</view><slot></slot></view>//在要使用组件的页面中这样定义<my-test4><view>这里是内部插槽内容</view></my-test4>
3.启用多个插槽
在小程序的自定义组件中,需要使用多 <slot> 插槽时,可以在组件的 .js 文件中,通过如下方式进行启用。
Component({options:{multipleSlots:true //这样就可以设置多个slot插槽},})
4.定义多个插槽
可以在组件的 .wxml 中使用多个 <slot> 标签,以不同的 name 来区分不同的插槽。示例代码如下:
<view><view>这里是外部内容</view><!-- name为before的第一个slot插槽 --><slot name="before"></slot><!-- name为after的第二个插槽 --><slot name="after"></slot></view>
在页面中使用如下:
<my-test4><view slot="before">第一个</view><view slot="after">第二个</view></my-test4>
效果: