EmberJS nested component events

I am using EmberJS CLI and I am trying to wrap my head around components. However I don't quite understand what the best way is to communicate between them. I am trying to make a simple graphics editor with a side menu and a canvas. I have a "graphics-editor" component which contains the "side-menu" and "editor-canvas" components as children. If I choose an option such as "insert text" on the "side-menu" component, how do I tell the "editor-canvas" to add some text?

I have heard of actions up, data down. So should I pass the side menu model to the canvas to observe (I may also have a menu bar which can tell the canvas to do stuff later on too, so I would also have to observe that somehow)? So whenever an action on the side menu occurs, its model is updated and the canvas can observe this and act on changes to it?

Or is there a clean way to bubble the side menu action up to the parent editor component and then catch it and call an action on the canvas component?

Or should I be using views and controllers (even though EmberJS seem to be steering people away from them) instead of components. Then the controller of graphics-editor can catch an action and pass it onto editor-canvas using controllerFor?

Or should I be using Ember.Evented?

In my main application template I have:

{{graphics-editor model=model}}

My graphics editor (graphics-editor.hbs) component looks like:

<div class="ui-layout-north nopadding">
  {{file-menu menuItems=model.fileMenu.menuItems}}
</div>
<div class="ui-layout-west">
  {{side-menu addLabel='addLabel'}}
</div>
<div class="ui-layout-center nopadding emptyBackground">
  {{editor-canvas canvasModel=model.canvas}}
</div>
<div class="ui-layout-south nopadding">
  {{editor-footer}}
</div>