在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。

1、单个slot,代码示例:
<!--第一步:封装组件,components/music/index.wxml--> <!--components/music/index.wxml-->
<view> <text>我是标准的</text> <!--下面是slot插槽(占位),用于承载组件引用时提供的子节点--> <slot></slot>
</view> <!--第二步:引入组件,pages/index/index.wxml--> <f-music></f-music> <f-music>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 --> <view>我是定制的内容</view> </f-music>


运行结果

2、多个slot,代码示例:
<!--第一步:封装组件,components/music/index.wxml--> <view> <text>我是标准的</text>
<!--下面是slot插槽(占位),用于承载组件引用时提供的子节点--> <slot name="custom1"></slot> <slot
name="custom2"></slot> </view> // 第二步:启用插槽,components/music/index.js
Component({ // 启用插槽 options: { multipleSlots: true } })
<!--第三步:引用组件,pages/index/index.wxml--> <f-music> <view
slot="custom2">我是定制的内容2</view> </f-music> <f-music> <!-- 下面这部分内容将被放置在组件 <slot>
的位置上 --> <view slot="custom1">我是定制的内容1</view> <view
slot="custom2">我是定制的内容2</view> </f-music>
运行结果 



Eed

 

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信