组件模版和样式
类似于页面，自定义组件拥有自己的 ttml 模版和 ttss 样式。
组件模版
组件模版的写法与页面模板相同。组件模版与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。
<!-- custom component template -->
<view class="component-wrapper">
<view>inner node</view>
<slot></slot>
</view><!-- Reference page templates for custom component -->
<view>
<my-component>
<view>custom component slot content</view>
</my-component>
</view>注意，在模版中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义，否则会被当作一个无意义的节点。
模版数据绑定
与普通的 ttml 模版类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。
<!-- Reference page templates for custom component -->
<view>
<my-component data-a="{{ data1 }}" data-b="{{ data2 }}">
<view>component slot content</view>
</my-component>
</view>在以上例子中，组件的属性 dataA 和 dataB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。
组件的 slot
在组件的 ttml 中可以包含 slot 节点，用于承载组件使用者提供的 ttml 结构。
默认情况下，一个组件的 ttml 中只能有一个 slot。需要使用多 slot 时，应使用不同的 name 来区分。
<!-- custom component content -->
<view class="wrapper">
<slot name="before"></slot>
<view>Content gose here</view>
<slot name="after"></slot>
</view>使用时，用 slot 属性来将节点插入到不同的 slot 上。
<!-- Reference page templates for custom component -->
<view>
<my-component>
<!-- This part of the content will be placed in the component <slot name="before"> -->
<view slot="before">before</view>
<!-- This part of the content will be placed in the position of the component <slot name="after"> -->
<view slot="after">after</view>
</my-component>
</view>组件样式
组件对应 ttss 文件的样式，只对组件 ttml 内的节点生效。编写组件样式时，需要注意以下几点：
- 继承样式，如
font、color，会从组件外继承到组件内。 - 除继承样式外，
app.ttss中的样式、组件所在页面的的样式对自定义组件无效。
点击纠错
评价此篇文档