1 Star 0 Fork 5.2K

OpenHarmony-build / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
js-components-custom-slot.md 1.65 KB
一键复制 编辑 原始数据 按行查看 历史
zengyawen 提交于 2021-11-10 20:02 . add arkui

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="sfirst">插入第一个插槽中</text>
   </comp>  
 </div>

说明: name 和 slot 属性不支持绑定动态数据。

1
https://gitee.com/openharmony-build/docs.git
git@gitee.com:openharmony-build/docs.git
openharmony-build
docs
docs
master

搜索帮助

53164aa7 5694891 3bd8fe86 5694891