How do I pass an object to a component?

Using latest Ember from October of 2021

yes! two ways,

via template-only:

<SomeComponent @object={{hash color="green"}} />

This uses the hash helper.

Note that there are other differences here as well. Arguments must begin with @ (to differentiate from attributes), which are native HTML, such as class, id, etc -- and "dynamic bits" in ember are surrounded by double curlies, {{}}. For an overview of attributes and arguments, I recommend Component Arguments and HTML Attributes from the official guides.

The second way to pass an object to a component is if you already have one:

import Component from '@glimmer/component';

export default class MyComponent extends Component {
  myObject = { color: 'green' };
}

<SomeComponent @object={{this.myObject}} />