** element but can use any outer element. Adding more than one outer element will lead to DOM diffing issues and unexpected behavior.
{% endhint %}
{% hint style="info" %}
By default, components should be placed in a **./wires** folder in the project root.
{% endhint %}
{% hint style="success" %}
Within your templates, you can access your [Data Properties](/3.x/essentials/properties.md), [Computed Properties](/3.x/essentials/computed-properties.md), and [Actions](/3.x/essentials/actions.md), and utilize any of the powerful template features listed under Template Features in the left-hand menu. Details on how to use these
{% endhint %}
## Separating Component Definition and Template
You can place the above code in separate files to separate your component and template definitions. **CFC components must extend 'cbwire.models.Component'**.
**./wires/MyComponent.cfc**
```javascript
component extends="cbwire.models.Component" {
// Data properties
data = {
"property1": "defaultValue",
"property2": "defaultValue"
};
// Computed properties
computed = {
"computedProperty" : function() {
// return something
}
};
// Actions
function action1() {
data.property1 = "another value";
}
}
```
**./wires/MyComponent.cfm**
```html
My Component
```
{% hint style="info" %}
Separating your template and component is how previous versions of CBWIRE worked. We recommend using the less verbose option of including both definitions in a single .CFM file for smaller UI components, and creating separate files for more complex UI components.
{% endhint %}
## Rendering Components
You can render a CBWIRE component using the **wire()** method.
```html
#wire( "ShowPosts" )#
```
```html
My Posts
#wire( "ShowPosts" )#
```
{% hint style="info" %}
You can call **wire()** from within your ColdBox layouts, ColdBox views, and also from your component templates ( nested components ).
{% endhint %}
## External Components
You can render wires from folders and subfolders outside of the default ./wires folder.
```html
#wire( "myFolder.MyComponent" )#
#wire( "myFolder.subFolder.MyComponent" )#
```
You can also reference components within another ColdBox module by using the @module syntax.
```html
#wire( "MyComponent@myModule" )#
```
## Passing Parameters
You can pass data into a component as an additional argument using **wire()**.
```html
#wire( "ShowPost", { "post": post } )#
```
{% hint style="success" %}
By passing in parameters, you can create reusable UI components that are unique but similar in functionality. For example, you could create a Button component that you use throughout your app.
{% endhint %}
## Using Parameters
Parameters are passed into your component's **onMount()** method. This is an optional method you can add.
```xml
#wire( "ShowPost", { post: currentPost } )#
data = {
"title": ""
};
function onMount( params, event, rc, prc ) {
data.title = params.post.getTitle();
}
}
Title: #title#
```
{% hint style="info" %}
CBWIRE only executes **onMount()** once when the component is initially rendered. It is not executed for subsequent XHR requests of the component.
{% endhint %}
## Auto Population of Data Properties
As of CBWIRE 3.2, properties that you pass into your component will be automatically populated if onMount() IS NOT defined and a matching data property is found.
{% hint style="info" %}
Passed-in properties must have a data type of string, boolean, numeric, date, array, or struct.
{% endhint %}
```html
#wire( "ShowPost", { title: "Some title" } )#
data = {
"title": ""
};
}
Title: #title#
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://cbwire.ortusbooks.com/3.x/essentials/components.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.