title: How to make a 'Container' component in Vue.js
body: <p>I'm new to Vue and cannot find a way to implement a React-like 'Wrapper' component with Vue.js, for example, a reusable <code>datagrid</code> component using a 3rd-party <code>some-table</code> component and a <code>pagination</code> component. Intuitively, <code>datagrid</code> will provide the data/props/events that both components need and control the communication between them. In <strong>React</strong>, this could be done as simply as something like</p>
  <pre><code>// inside &lt;Datagrid /&gt;
  &lt;Table {...someProps} /&gt;
  &lt;Pagination {...otherProps} /&gt;
  </code></pre>
  <p>With Vue, It seems like something like below can only pass <code>props</code> down to children components</p>
  <pre><code>// inside Datagrid.vue
  &lt;some-table v-bind=&quot;$props&quot;&gt;&lt;/some-table&gt;
  </code></pre>
  <p>I'm not sure if <code>slots</code> could be of help. This wrapper component that I've been struggling for takes all the <code>props/events/slots</code> its children need and pass them down to them so that I could utilize all the functionality that it's children(which probably some 3rd-party components) provide. Moreover, it may also take responsibility for something like data exchange between its children. While <code>datagrid</code> could be a slots wrapper, but what if both <code>table</code> and <code>pagination</code> require a same <code>data</code> prop which I think should reside in <code>datagrid</code>. How to pass this <code>data</code> down to the slots?</p>
  <pre><code>// Datagrid.vue
  &lt;template&gt;
    &lt;div&gt;
      &lt;slot name=&quot;table&quot;&gt;&lt;/slot&gt;
      &lt;slot name=&quot;pagination&quot;&gt;&lt;/slot&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Datagrid',
    data() {
      return {
        data: 'How to share it with table and pagination',
      }
    },
  }
  &lt;/script&gt; 
  </code></pre>
  <p>Some solutions that I could figure out:</p>
  <ol>
  <li><a href="https://v2.vuejs.org/v2/guide/render-function.html" rel="nofollow noreferrer">Render Functions</a>, but I don't think that complicity is needed in this case</li>
  <li>Instead of creating a 'Container' component, simply turn to <a href="https://v2.vuejs.org/v2/guide/mixins.html" rel="nofollow noreferrer">mixins</a>, but does this mean I have to input <code>&lt;pagination :total=&quot;total&quot; :other-props=&quot;are-same-for-all-datagrids&quot;&gt;&lt;/pagination&gt;</code> each time I want a datagrid?</li>
  </ol>
  <p>Any examples dealing with such situations in Vue? Thanks in advance!</p>