title: Using Eventbus or Props Dilemma in Vue.js Template
body: <p>I have a mainpage that calls all template with appropriate props, say </p>
  
  <pre><code>&lt;sideBar :menu="menu"&gt;&lt;/sideBar&gt;
  &lt;topBar&gt;&lt;/topbar&gt;
  &lt;mainContent&gt;&lt;mainContent&gt;
  </code></pre>
  
  <p>the problem is I have a nested data object to be called which naturally best implemented with parent-> children scheme like this :</p>
  
  <pre><code>main page-&gt; sideBar -&gt; topBar -&gt; mainContent
  </code></pre>
  
  <p>because the nested object is like following  :</p>
  
  <pre><code>menu:{topLevelA:{midLevelA1:'lowContentA1'},
                  {midLevelA2:'lowContentA2'},
        topLevelB:{midLevelB1:'lowContentB1'}}
  </code></pre>
  
  <p>naturally if using props, I can easily pass to children and grandchildren, but the downside, it's hard to tracked down the template design, it looks messy and scattered in several places, unlike single page as I have now.</p>
  
  <p>I can opt for a mainpage with the same level of children by using emit event or even Vuex, but that just seem unnatural.. hmmm.</p>
  
  <p>Possibly any better way?</p>
  
  <p>Edit for clarity:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="window"&gt;
      &lt;div class="window-content"&gt;
        &lt;div class="pane-group"&gt;
          &lt;sidebar-page-view :custList="custList"&gt;&lt;/sidebar-page-view&gt;
          &lt;div class="pane"&gt;
            &lt;topbar-header-view :custMenu="custMenu"&gt;&lt;/topbar-header-view&gt;
            &lt;window-pane-view :content="content"&gt;&lt;/window-pane-view&gt;
            &lt;div class="toolbar toolbar-footer"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- Window Content Ends --&gt;
  </code></pre>
  
  <p>Versus:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="window"&gt;
      &lt;div class="window-content"&gt;
        &lt;div class="pane-group"&gt;
          &lt;sidebar-page-view :custList="custList"&gt;&lt;/sidebar-page-view&gt;
          &lt;div class="pane"&gt;
  &lt;/template&gt;
  
  &lt;template&gt;
            &lt;topbar-header-view :custMenu="custMenu"&gt;&lt;/topbar-header-view&gt;
            &lt;window-pane-view :content="content"&gt;&lt;/window-pane-view&gt;
  &lt;/template&gt;
  
  &lt;template&gt;
            &lt;window-pane-view :content="content"&gt;&lt;/window-pane-view&gt;
            &lt;div class="toolbar toolbar-footer"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- Window Content Ends --&gt;
   &lt;/template&gt;
  </code></pre>
  
  <p>Data Object:</p>
  
  <pre><code>CustomerList A-CustomerA Menu 1-Content 1
                                 -Content 2
                -CustomerA Menu 2
                -CustomerA Menu 3 -Content 1
                                  -Content 2
  CustomerLust B-
                ...
  </code></pre>
  
  <p>It's hierarchical in nature, so props flow would be more make sense, with only methods function can be initiated compared to to only one level hierarchical as </p>
  
  <pre><code>I have now   _sidebar (custList)   it has to be initiated with eventBus or vuex
              |    
        Main--|-topbar (custMenu)
              |_
                windowPane (content) 
  </code></pre>