harmony 鸿蒙slot
slot
NOTE
The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Default Slot
You can use the <slot> tag to create a slot inside a custom component to fill the content defined in the parent component. The sample code is as follows:
<!-- comp.hml -->
<div class="item">
<text class="text-style">The following uses the content defined in the parent component.</text>
<slot></slot>
</div>
The following references the custom component:
<!-- xxx.hml -->
<element name='comp' src='../common/component/comp.hml'></element>
<div class="container">
<comp>
<text class="text-style">Content defined in the parent component</text>
</comp>
</div>
Named Slot
When multiple slots are need inside a custom component, you can name them, so that you can specify the slot in which you want to fill content by setting the <name> attribute.
<!-- comp.hml -->
<div class="item">
<text class="text-style">The following uses the content defined in the parent component.</text>
<slot name="first"></slot>
<slot name="second"></slot>
</div>
The following references the custom component:
<!-- xxx.hml -->
<element name='comp' src='../common/component/comp.hml'></element>
<div class="container">
<comp>
<text class="text-style" slot="second">Fill in the second slot.</text>
<text class="text-style" slot="sfirst">Fill in the first slot.</text>
</comp>
</div>
NOTE
<name> and <slot> do not support dynamic data binding.
你可能感兴趣的鸿蒙文章
harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm
0
赞
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦