javascript – vue包装另一个组件,传递道具和事件

我如何编写我的组件来包装另一个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中这样做的正确方法是什么？
 还有一个事件解决方案吗？

解决方法:

将要包装的组件放入包装器组件的模板中,将v-bind =“$attrs”v-on =“$listeners”添加到该组件标签,然后添加内部组件(以及可选地,inheritAttrs：false )到包装器组件的配置对象.

Vue的文档似乎没有在指南或任何内容中介绍,但0700,$listeners和inheritAttrs的文档可以在Vue’s API documentation中找到.此外,在将来搜索此主题时可能对您有帮助的术语是“Higher-Order Component” – 这与您使用“包装器组件”基本相同. (这个术语是我最初发现$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>

标签：javascript,vue-js,vue-component,wrapper
来源： https://codeday.me/bug/20190910/1799823.html