Ember包装组件内触发action报错问题咨询

你遇到的问题核心是Ember的{{action}}助手解析规则导致的：当你用引号包裹'wrapper.myAction'时，Ember会把整个字符串当作一个action名称，直接在当前模板所属的componentA上下文里查找对应的action处理器，而不会把它解析为wrapper对象上的myAction方法——这就是为什么报错说componentA找不到这个action。

正确的写法 #

你只需要去掉引号，直接传递wrapper.myAction的引用即可：

{{#wrapper-component as |wrapper|}}
  <button {{action wrapper.myAction}}>触发动作</button>
{{/wrapper-component}}

如果你的Ember版本比较新（支持Glimmer组件或新的修饰符语法），也可以使用更直观的{{on}}修饰符写法：

{{#wrapper-component as |wrapper|}}
  <button {{on 'click' wrapper.myAction}}>触发动作</button>
{{/wrapper-component}}

补充说明 #

当你通过block形式使用组件（{{#xxx as |context|}}），yield出来的wrapper是wrapper-component的实例（或其暴露的上下文对象），它上面的myAction是一个方法。{{action}}助手在接收不带引号的表达式时，会直接引用这个方法，而不是去当前组件的action哈希里查找；只有带引号的字符串，才会触发Ember的action查找逻辑，优先在当前模板所属组件（这里就是componentA）里找匹配的action。

内容的提问来源于stack exchange，提问作者Cereal Killer