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