如何在不使用服务的情况下将嵌套组件与 mixin 通信答案

【问题标题】：How to communicate nested component to mixin without using service如何在不使用服务的情况下将嵌套组件与 mixin 通信
【发布时间】：2016-08-14 06:42:22
【问题描述】：

我有一个嵌套组件。子组件有一个与 mixin 变量和操作绑定的输入字段，在父组件中有按钮操作。（没有 mixin，因为父组件被视为插件）而按钮操作触发子组件值更新到 mixin 变量。如何从父组件触发子操作。

注意：请参考随附的演示链接

https://ember-twiddle.com/d8b01ba563b555fc01374f300db20c5b?openFiles=components.child-component.js%2C

【问题讨论】：

标签： ember.js directory workspace

【解决方案1】：

比在子组件上触发操作更简单的方法是将 updated_val 向下传递给子组件，然后让 ember 值绑定完成其余工作。当值发生变化并单击更新时，从对话框组件进行 ajax 调用。

例如用于传递您的 updated_val

//application.hbs
{{dialog-component updated_val=updated_val}}

但由于您的问题是“如何触发子组件上的操作”，这可能是一种方法（请参阅更新的twiddle）：

//dialog-component.js
import Ember from 'ember';

export default Ember.Component.extend( {

  actionCalled: false,
  actions:{ 

    callChildAction() {
      this.toggleProperty( 'actionCalled' );
    },

    updateValue(updateVal) {
      this.set('updated_val', updateVal);
    }  
  }

});

//dialog-component.hbs
<div class='dialog'>

  {{!pass your 'updateValue' action from the dialog-component to the child-component}}
  {{ child-component actionCalled=actionCalled updateValue=(action 'updateValue')}}

  <button {{action 'callChildAction' }}> Update </button>

</div>

//child-component.js
import Ember from 'ember';

export default Ember.Component.extend( {

  child_val: '',

  actionObserver: Ember.observer('actionCalled', function(){
    this.send('childAction')
  }),

  actions:{

    childAction(){
        alert( 'childAction called..' );

        // some validation and ajax call.      
        this.sendAction('updateValue', this.get('child_val'));     
     },   
  }

});

//child-component.hbs
{{input value=child_val}}

【讨论】：