在组件模板中可以提供一个 <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
热门工具 换一换