---
title: "component"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/sline/tag/component'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/sline/tag/component.md'
---

# component


    用于渲染指定的代码片段，支持以下两种类型：
- 全局代码片段：存放在 [component](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/components.md) 目录下，可跨模块调用。
- 私有代码片段：存放在 [sections](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/sections.md) 或 [blocks](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/blocks.md) 目录下，仅限当前模块使用。

如需使用作用域之外的变量，必须通过 `hash` 参数传入，Sline 全局 object 无需传 `hash` 参数。

    



```sline
{{#component file_path [hash...] /}}
```





    
        ## 必选参数

        
            - `file_path` `string`: 代码片段文件路径。对于全局代码片段，使用绝对路径，即 `components/` 下的文件名。对于私有代码片段，使用相对路径，以 `./` 开头。
        
    



    
        ## 可选参数

        
            - `hash...` `any`: 动态哈希参数，可以传递多个键值对（格式为 key=value）的参数集合，数量不限。这些参数是用于向代码片段提供所需的变量信息。在代码片段内部，这些参数可以通过 [props](https://developer.shopline.com/zh-hans-cn/docs/sline/object/props.md) 对象进行访问和使用。
        
    



    
        ## 例子

        
### 使用全局代码片段

            调用 `components/title.html` 全局组件：

            
```sline
{{#component "title" /}}
```
            

            
        
### 使用私有代码片段

            在 `sections/header/header.html` 中调用同目录的`sections/header/title.html`：

            
```sline
{{#component "./title" /}}
```
            

            
        
### 向组件传递参数

            将 `sections/header/header.html` 中的变量 `title` 传入到同目录的`sections/header/title.html` 中使用。

            
```sline
<!--! sections/header/header.html -->
{{#component "./title" title=section.settings.title show=true /}}

<!--! sections/header/title.html -->
{{#if show}}
    {{ title }}
{{/if}}
```