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的文档似乎没有在指南或任何内容中介绍这一点,但是$ attrs,$ listeners和inheritAttrs 的文档可以在Vue的API文档中找到.此外,在将来搜索此主题时可能有助于您的术语是" 高阶组件 " - 这与您使用"包装器组件"基本相同.(这个术语是我最初发现$ 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>