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）添加到包装器组件＆＃ 39; s config对象。

Vue的文档似乎无法在指南或其他任何内容中介绍此内容，但$attrs，$listeners和inheritAttrs的文档可以在{ {3}}。此外，在将来搜索此主题时可能有助于您的术语是＆＃34; Vue's API documentation＆＃34; - 这与你使用＆＃34;包装组件＆＃34;基本相同。（这个术语是我最初发现$ 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>

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

1 个答案: