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 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.

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

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.

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

const anotherProperty = {
    "Some other property"
}

export {sourceProperty, anotherProperty}

class MyPage extends wire.ui.WebComponent {

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