1# slot插槽 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @seaside_wu1--> 5<!--Designer: @shiyu_huang--> 6<!--Tester: @TerryTsao--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 11> 从API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 12 13 14## 默认插槽 15 16自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素，使用方式如下： 17 18```html 19<!-- comp.hml --> 20<div class="item"> 21 <text class="text-style">下面使用父组件定义的内容</text> 22 <slot></slot> 23</div> 24``` 25 26引用该自定义组件方式如下： 27```html 28<!-- xxx.hml --> 29 <element name='comp' src='../common/component/comp.hml'></element> 30 <div class="container"> 31 <comp> 32 <text class="text-style">父组件中定义的内容</text> 33 </comp> 34 </div> 35``` 36 37 38## 具名插槽 39 40当自定义组件中需要使用多个插槽时，可通过对插槽命名的方式进行区分，当填充插槽内容时，通过声明插槽名称，将内容加到对应的插槽中。 41 42```html 43<!-- comp.hml --> 44<div class="item"> 45 <text class="text-style">下面使用父组件定义的内容</text> 46 <slot name="first"></slot> 47 <slot name="second"></slot> 48</div> 49``` 50 51引用该自定义组件方式如下： 52```html 53<!-- xxx.hml --> 54 <element name='comp' src='../common/component/comp.hml'></element> 55 <div class="container"> 56 <comp> 57 <text class="text-style" slot="second">插入第二个插槽中</text> 58 <text class="text-style" slot="first">插入第一个插槽中</text> 59 </comp> 60 </div> 61``` 62 63> **说明：** 64> 65> name 和 slot 属性不支持绑定动态数据。 66