Question

我是Vue的新手，无法找到使用Vue.js实现类似React的'Wrapper'组件的方法，例如，使用第三方datagrid的可重用some-table组件组件和pagination组件。直观地，datagrid将提供两个组件所需的数据/道具/事件，并控制它们之间的通信。在 React 中，可以像

那样简单地完成

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

使用Vue，似乎下面的内容只能将props传递给子组件

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

我不确定slots是否有帮助。我一直在努力争取的这个包装器组件需要它所需的所有props/events/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>

我能想出的一些解决方案：

Render Functions，但我不认为在这种情况下需要共谋
不是创建“容器”组件，只需转到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>

如何在Vue.js

1 个答案: