ember data-binding from parent to child

i have just started learning ember 1 week ago, and i'm little confused about data-biding :

• i have index controller that have a foor property,
• test-component that have a its bar property comming from the index controller foo property

---

index

index.hbs // template

parent value  : 

index.js // controller

import Ember from 'ember';

export default Ember.Controller.extend({
  foo: "",
});

test-component // template

child value 

test-component // component

import Ember from 'ember';

let TestComponent = Ember.Component.extend({
});

TestComponent.reopenClass({
  positionalParams: ['bar'],
});

export default TestComponent;

---

what confuse is :

1. if write the component in my index template as , i get only one-way data-binding, that mean if i change the bar property in the component, the foo property don't change.

2. if i use a inside my component, i can see that both bar and foo get updated, so bar is binded to both foo and input value component ?? how its is working(PS : as i said in question 1, foo get updated only if i write in my index template

and thanks everyone.