> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/webcomponents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/webcomponents/objects.md).

# Objects

Binding attributes allow objects from one component to be passed into another.  

In the following example, the `my-page` component uses `my-component` in it's template.  The `sourceProperty` property is passed into my-component's `message` property using my-component's binding attribute `wr-message`.

```javascript
class MyPage extends wire.ui.WebComponent {

  sourceProperty = "Hello web components"; 

  static get template() {
    return '<my-component wr-message="sourceProperty"></my-component>';
  }      
}
customElements.define('my-page', MyPage);
```

```html
<!-- Output -->
<div>Hello web components</div>
```

## Property Reference

In the previous example, `sourceProperty` was a primitive string value.  In the example below, `sourceProperty` is changed to an object with a single property `sourceMessage`.  The same value is passed into `my-component` by setting the binding attribute `wr-message` to `sourceMessage` on `sourceProperty`.

```javascript
class MyPage extends wire.ui.WebComponent {

  sourceProperty = {
    sourceMessage: "Hello web components"; 
  }

  static get template() {
    return '<my-component wr-message="sourceProperty.sourceMessage"></my-component>';
  }      
}
```

## Object Reference

In the example below, rather than passing a single property on `sourceProperty` into `my-component`, the object itself is passed into `my-component`.

```javascript
class MyPage extends wire.ui.WebComponent {

  sourceProperty = {
    sourceMessage: "Hello web components"; 
  }

  static get template() {
    return '<my-component wr-message="sourceProperty"></my-component>';
  }      
}
```

The object can then be referenced in my-components' template using the local property `message`.

```javascript
class MyComponent extends wire.ui.WebComponent {

  static get properties() {
    return {
      message: true
    }
  }
  static get template() {
    return '<div wr-text="message.sourceMessage"></div>';
  }
      
}
```