harmony 鸿蒙slot插槽
slot插槽
说明:
从API Version 7 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
默认插槽
自定义组件中通过slot标签来承载父组件中定义的内容,使用slot标签可以更加灵活的控制自定义组件的内容元素,使用方式如下:
<!-- comp.hml -->
<div class="item">
<text class="text-style">下面使用父组件定义的内容</text>
<slot></slot>
</div>
引用该自定义组件方式如下:
<!-- xxx.hml -->
<element name='comp' src='../common/component/comp.hml'></element>
<div class="container">
<comp>
<text class="text-style">父组件中定义的内容</text>
</comp>
</div>
具名插槽
当自定义组件中需要使用多个插槽时,可通过对插槽命名的方式进行区分,当填充插槽内容时,通过声明插槽名称,将内容加到对应的插槽中。
<!-- comp.hml -->
<div class="item">
<text class="text-style">下面使用父组件定义的内容</text>
<slot name="first"></slot>
<slot name="second"></slot>
</div>
引用该自定义组件方式如下:
<!-- xxx.hml -->
<element name='comp' src='../common/component/comp.hml'></element>
<div class="container">
<comp>
<text class="text-style" slot="second">插入第二个插槽中</text>
<text class="text-style" slot="first">插入第一个插槽中</text>
</comp>
</div>
说明:
name 和 slot 属性不支持绑定动态数据。
你可能感兴趣的鸿蒙文章
0
赞
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦