Vue.jsで 'Container'コンポーネントを作成する方法

Question

Vueが新しく、Vue.jsでReact-like 'Wrapper'コンポーネントを実装する方法が見つかりません。たとえば、再利用可能なdatagridサードパーティのsome-tableコンポーネントとpaginationコンポーネントです。直感的に、datagridは、両方のコンポーネントが必要とするデータ/小道具/イベントを提供し、それらの間の通信を制御する。 はを反応させるのでは、これは単にヴューで

// inside <Datagrid /> 
<Table {...someProps} /> 
<Pagination {...otherProps} /> 

のようなもののように行うことができる、唯一の

// inside Datagrid.vue 
<some-table v-bind="$props"></some-table> 

私はよく分からない子コンポーネントまでpropsを渡すことができ、以下のようなもののように思えますもしslotsが助けになるのであれば。私が苦労してきたこのラッパーコンポーネントは、子どもが必要とするすべての機能（おそらくいくつかの第三者コンポーネント）が利用できるように、すべての子どもが必要とする子どもを必要とし、それらに渡します。さらに、子供たちとの間のデータ交換のようなものについても責任を負うことがあります。 datagridはスロットラッパーになる可能性がありますが、tableとpaginationの両方に同じdataの小道具が必要な場合は、datagridにあるはずです。このdataをスロットに渡すにはどうすればいいですか？

// Datagrid.vue 
<template> 
    <div> 
    <slot name="table"></slot> 
    <slot name="pagination"></slot> 
    </div> 
</template> 

<script> 
export default { 
    name: 'Datagrid', 
    data() { 
    return { 
     data: 'How to share it with table and pagination', 
    } 
    }, 
} 
</script> 

私が把握できたいくつかの解決策：

1. Render Functionsが、私は単純に回し、代わりに「コンテナ」コンポーネントを作成するの共犯が、この場合
2. に必要とされることはないと思いますmixinsになりますが、これはデータグリッドが必要なときに毎回<pagination :total="total" :other-props="are-same-for-all-datagrids"></pagination>を入力する必要があることを意味しますか？

このような状況をVueで処理する例はありますか？前もって感謝します！

Answer 1

あなたはslotsを使用したい：

Vue.component('wrapper', { template: '#wrapper' }) 
 

 
new Vue({ el: '#app' })

<!-- wrapper template --> 
 
<script type="text/x-template" id="wrapper"> 
 
    <div class="wrapper" style="background: beige; padding: 5px;"> 
 
    This is being wrapped: 
 
    <slot></slot> 
 
    </div> 
 
</script> 
 

 
<div id="app"> 
 
    <wrapper> 
 
    <div style="background: aliceblue;">I'm being wrapped!</div> 
 
    </wrapper> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>