> 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/imports.md).

# Imports

Instead of setting data on the parent component just to bind it to a child component, use `wr-import-*`  to bring the data directly in to the child component.  This binding is a [dynamic import](https://javascript.info/modules-dynamic-imports) that sets the value of the source export into a property on the component.  Replace the `*` with the name of the property.

## Default Imports

In the example below, the `sourceProperty` object will be dynamically imported and set on the `message` property on `my-component`.

```javascript
// sourceProperty.js
const sourceProperty = {
    "Hello web components"; 
}
export default sourceProperty;
```

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

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

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

## Named Imports

In the example above, `sourceProperty` is the default export so there is no need to specify a name for the import.  To specify a named import, pass the name as a parameter.  Parameters are passed to bindings using the pipe `|` character.

In the example below, the `message` property on `my-component` is set to the  `sourceProperty` export.

```javascript
// properties.js
const sourceProperty = {
    "Hello web components"; 
}

const anotherProperty = {
    "Some other property"
}

export {sourceProperty, anotherProperty}
```

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

  static get template() {
    return `<my-component wr-import-message-="./properties.js | sourceProperty"</my-component>`;
  }       
}
```