类似于页面,自定义组件拥有自己的 wxml
模板和 wxss
样式。
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。
在组件模板中可以提供一个 <slot>
节点,用于承载组件引用时提供的子节点。
代码示例:
在开发者工具中预览效果
<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
注意,在模板中引用到的自定义组件及其对应的节点名需要在 json
文件中显式定义,否则会被当作一个无意义的节点。除此以外,节点名也可以被声明为抽象节点。