• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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