Name editor p2

components.first-name-editor.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.last-name-editor.js

import Ember from 'ember';

export default Ember.Component.extend({
});

components.name-editor.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  
  value: null,
  
  firstName: Ember.computed('value', function() {
    return (this.value || '').split(' ')[0];
  }).readOnly(),
  
  lastName: Ember.computed('value', function() {
    return (this.value || '').split(' ')[1];
  }).readOnly(),

  setFirstName(value) {
    let fullName = [value, this.lastName].join(' ');
    this.onChange(fullName);
  },

  setLastName(value) {
    let fullName = [this.firstName, value].join(' ');
    this.onChange(fullName);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  fullName: 'Tom Dale',
  
  setFullName(value) {
    this.set('fullName', value);
  }
});

templates.application.hbs

<h1>{{fullName}}</h1>

<h3>Without block</h3>

<NameEditor @onChange={{action setFullName}} @value={{fullName}} />

<h3>With block</h3>

<NameEditor @onChange={{action setFullName}} @value={{fullName}} as |Editor|>
  <Editor.firstName />
  <Editor.lastName />
</NameEditor>

templates.components.first-name-editor.hbs

<label>First name:</label>
<input
  value={{@value}}
  oninput={{action @onChange value="target.value"}}
>

templates.components.last-name-editor.hbs

<label>Last name:</label>
<input
  value={{@value}}
  oninput={{action @onChange value="target.value"}}
>

templates.components.name-editor.hbs

{{#if hasBlock}}
  {{yield (hash
    firstName=(component "firstNameEditor"
      onChange=(action this.setFirstName)
      value=this.firstName
    )
    lastName=(component "lastNameEditor"
      onChange=(action this.setLastName)
      value=this.lastName
    )
  )}}
{{else}}
  <FirstNameEditor
    @onChange={{action this.setFirstName}}
    @value={{this.firstName}}
  />

  <LastNameEditor
    @onChange={{action this.setLastName}}
    @value={{this.lastName}}
  />
{{/if}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}