title: vue: passing props down to all descendants
body: <p>I have a parent component with the following line</p>
  
  <pre><code>&lt;router-view :product-id="productId" :data-source="attributes"&gt;&lt;/router-view&gt;
  </code></pre>
  
  <p>depending on the context it renders one of the two components defined in the router config</p>
  
  <pre><code>path: 'parent',
  component: Parent,
  children:
  [
      {
          path: 'edit',
          component: Edit,
          children:
          [
              {
                  path: 'attribute/:id',
                  component: Attribute,
              }
          ]
      },
      {
          path: 'grid',
          component: Grid,
      }
  ]
  </code></pre>
  
  <p>The thing is that the product-id and data-source props are available only in the Edit and Grid components. I'd like to have them available in the Attribute component as well as the Edit component is just a background with some static text (common for many components).</p>
  
  <p>As a workaround I've created a propertyBag prop in the Edit component that passes an object down. That's the way I use it in the parent component</p>
  
  <pre><code> &lt;router-view :property-bag="{ productId:productId, dataSource:dataSource, ...
  </code></pre>
  
  <p>and the Edit component</p>
  
  <pre><code>&lt;router-view :property-bag="propertyBag"&gt;&lt;/router-view&gt;
  </code></pre>
  
  <p>Is there a simpler way to achieve it ?</p>