如何在 Vue.js 中制作“容器”組件

Question

我是 Vue 新手，找不到使用 Vue.js 實現類似 React 的“Wrapper”組件的方法，例如，使用第 3 方some-table組件和pagination組件的可重用datagrid組件。 直觀地說， datagrid將提供兩個組件所需的數據/道具/事件，並控制它們之間的通信。 在React中，這可以像這樣簡單地完成

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

使用 Vue，看起來像下面這樣的東西只能將props傳遞給子組件

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

我不確定slots是否有幫助。 我一直在努力爭取的這個包裝器組件獲取其子級所需的所有props/events/slots並將它們傳遞給它們，以便我可以利用它的子級（可能是一些第 3 方組件）提供的所有功能。 此外，它還可能負責其子級之間的數據交換之類的事情。 雖然datagrid可以是一個插槽包裝器，但是如果table和pagination都需要我認為應該駐留在datagrid中的相同data道具怎么辦。 如何將此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. 渲染函數，但我認為在這種情況下不需要同謀
2. 而不是創建一個“容器”組件，只需轉向mixins ，但這是否意味着我必須輸入<pagination :total="total" :other-props="are-same-for-all-datagrids"></pagination>每次我想要一個數據網格？

在 Vue 中處理此類情況的任何示例？ 提前致謝！

Answer 1

您想使用插槽：

 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>