component lifecycle

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  isCoco: false,
  
  index: 0,
  
 /* mouseEnter() {
		this.set('isCoco', true);
		return false;
	},
  
  mouseMove() {
		this.set('isCoco', true);
	},

	mouseLeave() {
		this.set('isCoco', false);
		return false;
	},*/
  
  didUpdateAttrs() {
		this._super(...arguments);
		console.debug('didUpdateAttrs', arguments[0]);
	},

	didReceiveAttrs() {
		this._super(...arguments);
		console.debug('didReceiveAttrs', arguments[0]);
	},
	
	willUpdate() {
		this._super(...arguments);
		console.debug('willUpdate', arguments[0]);
	},

	willRender() {
		this._super(...arguments);
		console.debug('willRender', arguments[0]);
	},
  
  actions: {
  	changeAttr() {
    	//this.incrementProperty('index');
    	this.toggleProperty('isCoco');
    }
  }
});

components.my-sub.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
  	changeAttr() {
    	//this.incrementProperty('parent.index');
    	this.toggleProperty('parent.isCoco');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  index: 0,
  
  actions: {
  	changeAttr() {
    	this.incrementProperty('index');
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

{{my-component isCoco=isCoco }}

<p>
<button {{action "changeAttr"}}>Change</button>
</p>

templates.components.my-component.hbs

<h4>My Component</h4>
<p>
{{isCoco}} - {{index}}
</p>
<p>
<button {{action "changeAttr"}}>Change component</button>
</p>

<br /> 
{{my-sub parent=this}}

templates.components.my-sub.hbs

<p>SUB</p>
<p>
<button {{action "changeAttr"}}>Change parent</button>
</p>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}