vue 包装另一个组件，传递道具和事件

Question

如何编写我的组件来包装另一个 vue 组件，而我的包装器组件可以获得一些额外的道具？ 我的包装模板组件应该是：

<wrapper-component>
   <v-table></v-table> <!-- pass to v-table all the props beside prop1 and prop2 -->
</wrapper-component>

和包装道具：

props: {
  prop1: String,
  prop2: String
}

在这里，我想包装一个表格组件，并将传递给包装器的所有道具和事件传递给表格组件，除了两个额外的道具prop1和prop2 。 在 vue 中这样做的正确方法是什么？ 事件也有解决方案吗？

Answer 1

将要包装的组件放入包装器组件的模板中，将v-bind="$attrs" v-on="$listeners"添加到该组件标签，然后添加内部组件（并且，可选地， inheritAttrs: false ) 到包装器组件的配置对象。

Vue 的文档似乎没有在指南或其他任何内容中涵盖这一点，但可以在Vue 的 API 文档中找到$attrs 、 $listeners和inheritAttrs的文档。 此外，在将来搜索此主题时可能会对您有所帮助的术语是“高阶组件”（HOC） - 这与您对“包装器组件”的使用基本相同。 （这个术语是我最初发现 $attrs 的方式）

例如...

<!-- WrapperComponent.vue -->
<template>
    <div class="wrapper-component">
        <v-table v-bind="$attrs" v-on="$listeners"></v-table>
    </div>
</template>

<script>
    import Table from './BaseTable'

    export default {
        components: { 'v-table': Table },
        inheritAttrs: false // optional
    }
</script>

编辑：或者，您可能希望通过is属性使用动态组件，以便您可以将要包装的组件作为道具传递（更接近高阶组件的想法），而不是始终是相同的内部组件。 例如：

<!-- WrapperComponent.vue -->
<template>
    <div class="wrapper-component">
        <component :is="wraps" v-bind="$attrs" v-on="$listeners"></component>
    </div>
</template>

<script>
    export default {
        inheritAttrs: false, // optional
        props: ['wraps']
    }
</script>

编辑 2 ：我错过的 OP 原始问题的一部分是通过除了一两个道具之外的所有道具。 这是通过显式定义包装器上的道具来处理的。 引用$attrs的文档：

包含不被识别（和提取）为道具的父范围属性绑定（类和样式除外）

例如， example1在下面的代码片段中被识别并提取为道具，因此它不会被包含在传递的$attrs中。

 Vue.component('wrapper-component', { template: ` <div class="wrapper-component"> <component :is="wraps" v-bind="$attrs" v-on="$listeners"></component> </div> `, // NOTE: "example1" is explicitly defined on wrapper, not passed down to nested component via $attrs props: ['wraps', 'example1'] }) Vue.component('posts', { template: ` <div> <div>Posts component</div> <div v-text="example1"></div> <div v-text="example2"></div> <div v-text="example3"></div> </div> `, props: ['example1', 'example2', 'example3'], }) new Vue({ el: '#app', template: ` <wrapper-component wraps="posts" example1="example1" example2="example2" example3="example3" ></wrapper-component> `, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>