我如何编写我的组件来包装另一个vue组件，而我的包装器组件可以获得一些额外的props ？我的包装器模板组件应该是:
<wrapper-component>
<v-table></v-table> <!-- pass to v-table all the props beside prop1 and prop2 -->
</wrapper-component>
还有包装props :
props: {
prop1: String,
prop2: String
}
这里我想包装一个表组件，并将传递给包装器的所有props 和事件传递给表组件，另外还有两个props prop1和prop2.在vue中这样做的正确方式是什么？
将要包装的组件放入包装器组件的模板中，将v-bind="$attrs" v-on="$listeners"添加到该组件标记中，然后将内部组件(以及可选的inheritAttrs: false)添加到包装器组件的配置对象中.
Vue的文档似乎没有在指南或任何东西中涵盖这一点，但$attrs、$listeners和inheritAttrs的文档可以在Vue's API documentation中找到.另外，在将来搜索这个主题时，一个可能有助于您的术语是"Higher-Order Component"(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>
Edit:或者，你可能希望通过is attribute使用dynamic components，这样你就可以将要包装的组件作为props 传递进来(更接近高阶组件的概念)，而不是始终是同一个内部组件.例如:
<!-- 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>
Edit 2:OP最初的问题中，我错过了除了一两个props 以外的所有props .这是通过在包装器上显式定义props 来处理的.要引用$attrs的文档:
包含未被识别(和提取)为props 的父作用域属性绑定(类和样式除外)
例如，在下面的代码片段中，example1被识别并提取为一个props ，因此它不会作为$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>