---
title: "components"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/components'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/components.md'
---
# components

`components` 目录包含的是可复用的代码片段，通常包含独立的功能或 UI 元素（如面包屑、按钮、图标等）。

本文以面包屑 UI 组件元素为例，说明其使用方法。

* * *

## 目录结构{#f5uYl}

主题对 `components` 的目录层级结构没有强制要求，但建议按功能分类。标准结构示例如下：

```bash
components
└─ breadcrumb             # 面包屑组件
    ├─ breadcrumb.html    # 组件模版
    ├─ breadcrumb.css     # 组件样式（可选）
    └─ breadcrumb.js      # 组件脚本（可选）
```

* * *

## 引用方式{#Frbkf}

在页面模板或组件文件中，可通过 [component](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/component.md)  tag 引用代码片段，引用路径遵循 `组件目录/模板文件名` 格式。以下是主题组件文件引用面包屑片段的示例：

```html
<!-- sections/customers-order-detail.html -->

<div class="order-detail-page">
  <section class="order-detail">
    {{#component "breadcrumb/breadcrumb" /}}
  </section>
</div>
```

* * *

## 支持自定义参数{#iapLe}

代码片段支持传递多个自定义参数，以实现相同代码段在不同模块中的不同表现。以下是一个代码片段传递参数的基本示例：

### 1\. 传递参数{#oya7L}

在 `sections/customers-order-detail.html` 组件文件中，将 `class` 和 `title` 参数传递给面包屑组件，并为其赋值：

```html
<div class="order-detail-page">
  <section class="order-detail">
    <!-- 传递 class 和 title 参数 -->
    {{#component "breadcrumb/breadcrumb" class="hidden-desktop" title="Order Name" /}}
  </section>
</div>
```

### 2\. 获取参数{#CmrZB}

在 `components/breadcrumb/breadcrumb.html` 片段文件中，你可以通过 [props](https://developer.shopline.com/zh-hans-cn/docs/sline/object/props.md) object 获取到传过来的 `class` 和 `title` 值：

```html
<a class="breadcrumb {{props.class}}"> <!-- 获取 class 参数值 -->
  <div class="breadcrumb__title body1">{{props.title}}</div> <!-- 获取 title 参数值 -->
</a>

<div class="title">{{props.title}}</div> <!-- 获取 title 参数值 -->
```

### 3\. 渲染结果{#pzs5R}

经过模板引擎渲染之后的 HTML 代码如下所示：

```html
<div class="order-detail-page">
  <section class="order-detail">
    <a class="breadcrumb hidden-desktop"> <!-- 新注入的 class -->
      <div class="breadcrumb__title body1">Order Name</div> <!-- 新注入的 title -->
    </a>

    <div class="title">Order Name</div> <!-- 新注入的 title -->
  </section>
</div>
```