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