how to access parent component scope from a child components scope in ember?

Question 1

I updated your code with some comments please give a look http://emberjs.jsbin.com/ivOyiZa/1/edit.

Javascript

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      { head: "foo head", body: "foo body " },
      { head: "bar head", body: "bar body " },
      { head: "ya head", body: "yo body " }
    ];
  }
});

App.EmberAccordionComponent = Ember.Component.extend({
  // each accordion header/body item, will have a instance of that view.
  // so we can isolate the expanded state for each accordion header/body
  emberAccordionItemView: Ember.View.extend({    
    expanded: false
  }),
  _yield: function(context, options) {
    var get = Ember.get, 
    view = options.data.view,
    parentView = this._parentView,
    template = get(this, 'template');

    if (template) {
      Ember.assert("A Component must have a parent view in order to yield.", parentView);      
      view.appendChild(Ember.View, {
        isVirtual: true,
        tagName: '',
        _contextView: parentView,
        template: template,
        context: get(view, 'context'), // the default is get(parentView, 'context'),
        controller: get(view, 'controller'), // the default is get(parentView, 'context'),
        templateData: { keywords: parentView.cloneKeywords() }
      });
    }
  }
});

App.EmberAccordionHeaderComponent = Ember.Component.extend({  
  classNames: ['ember-accordion-header'],  
  click: function() {
    // here we toggle the emberAccordionItemView.expanded property
    this.toggleProperty('parentView.expanded');  
  }
});

Templates

  <script type="text/x-handlebars" data-template-name="index">
    {{#ember-accordion listOfAccordionPaneObjects=model}}                        
          {{#ember-accordion-header}}
              {{head}} <!-- each object passed in listOfAccordionPaneObjects=model can be accessed here -->
          {{/ember-accordion-header}}
          {{#ember-accordion-body}}
              {{body}} <!-- each object passed in listOfAccordionPaneObjects=model can be accessed here -->
          {{/ember-accordion-body}}        
    {{/ember-accordion}}        
  </script>

  <script type="text/x-handlebars" data-template-name="components/ember-accordion">     
    {{#each listOfAccordionPaneObjects itemViewClass="view.emberAccordionItemView"}}            
      <div class="ember-accordion-container">
        <div class="ember-accordion-pane">          
            {{yield}}          
        </div>
      </div>      
    {{/each}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/ember-accordion-header">        
    {{yield}}    
  </script>

  <script type="text/x-handlebars" data-template-name="components/ember-accordion-body">    
    <!-- when EmberAccordionHeaderComponent.click is called, the expanded property change and the content can be visible or not, based on expanded truth -->
    {{#if parentView.expanded}}
      <div class="ember-accordion-pane-content">
        {{yield}}
      </div>
    {{/if}}
  </script>

Css

.ember-accordion-header {
  background-color: #999;
  color: #ffffff;
  padding: 10px;
  margin: 0;
  line-height: 14px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.ember-accordion-container {
  height: 100%;
  width: 100%;
}

.ember-accordion-pane {
  padding: 2px;
}

.emberaccordionheaderselected {
  background-color: #bbb;
  color: #333;
  font-weight: bold;
}

.ember-accordion-header:hover {
  text-decoration: underline !important;
}

.emberaccordionheaderselected:hover {
  text-decoration: underline !important;
}

.ember-accordion-pane-content {
  padding: 5px;
  overflow-y: auto;
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.emberdisabledpane {
  opacity: .2;
}

Question 2

Yes, it's easy to do.

Here's a really simplistic, un-styled example, where it's on hover instead of click, but click is in the jsbin if you uncomment it, and comment out the mouseenter/mouseleave functions.

http://emberjs.jsbin.com/ijEwItO/3/edit

<script type="text/x-handlebars" data-template-name="components/unicorn-accordian">
  <ul>
    {{#each item in content itemController='unicornItem' itemView='unicornItem'}}
      <li>{{item.title}}
      {{#if bodyVisible}}
         <br/>
         {{item.body}}
      {{/if}}
      </li>
    {{/each}}
  </ul>
 </script>


App.UnicornAccordianComponent = Em.Component.extend();

App.UnicornItemController = Em.ObjectController.extend({
  bodyVisible: false
});

App.UnicornItemView = Em.View.extend({
  mouseEnter: function(){
    this.set('controller.bodyVisible', true);
  },

  mouseLeave: function(){
    this.set('controller.bodyVisible', false); 
  }
});

Question 3

Surely a much easier-to-implement solution is to pass the view (or other parent) as an argument to the component. This will give you access to all the properties of the view whilst still retaining the advantages of using a contained component. For example:

{{#ember-accordion listOfAccordionPaneObjects=model info=view}}{{!-- Pass view in here--}}

    {{log view.info}}{{!-- This will log what view.parentView would have done--}}

  {{ember-accordion-heading firstName=accordionPaneObject.firstName}}

  {{ember-accordion-body lastName=accordionPaneObject.lastName}}

{{/ember-accordion}}

Your header template would look something like this:

Header template html here {{firstName}}

And your body template would look something like this:

Body html here {{lastName}}