小程序slot

本文介绍微信小程序中slot插槽的使用方法,包括单slot和多个具名slot。先在app.json中注册组件,页面组件标签内插入内容,组件内部用<slot>标签显示插入内容。支持多个slot时,需在组件js中设置multipleSlots: true,并通过name属性区分,页面中用slot属性指定对应插槽。

作者:zhuge···预计阅读 19 分钟·941 阅读·0 评论
小程序slot

app.json

  "usingComponents":{

    "tst2":"/componets/tst/tst"

  }


页面中

<tst>

  <view>页面中</view>

</tst>

组件中

<view>

  <view>组件内上</view>

  <slot></slot>

  <view>组件内下</view>

</view>


支持多个slot

组件js

Component({

  options:  {

    multipleSlots:true

  }

...

}

组件中

<view>

  <slot name='a'></slot>

  <view>组件内上</view>

  <slot name='b'></slot>

  <view>组件内下</view>

</view>

页面中

<tst>

  <view slot='a'>这是a的内容</view>

  <view slot='b'>这是b的内容</view>

</tst>


相关文章

评论

加载中...