Rendering named arguments, @ vs this.args


I was playing a bit with named arguments and noticed that to my surprise rendering an argument passed from the parent component works fine either with @ or with this.args. I could not find any information though whether @ is just an alias for this.args or there is something more to it.

Twiddle with an example: Ember Twiddle


The @ is the more foundational idea, because all components always receive their arguments that way.

Not all components have a this. Template-only components do not, for example.

this.args.thing necessarily works on Glimmer components because Glimmer components put their arguments into this.args. Similarly, on classic Ember components you can find all the arguments directly on this, like this.thing.

Ember ships with a default lint rule that tells you not to use {{this.args.thing}} when you could have used {{@thing}}.


I was also getting confused regarding the given arguments. Thanks, for clearing the confusion in such beautiful manner.