Vue.js Vue-如何在包装器组件内传递插槽？

因此，我创建了一个简单的包装器组件，其模板如下：

<wrapper>
   <b-table v-bind="$attrs" v-on="$listeners"></b-table>
</wrapper>

使用

$attrs

和

$listeners

传递道具和事件。
工作正常，但是包装器如何将

命名插槽代理给子级？

Vue 3

与下面的Vue 2.6示例相同，只是：

• $listeners

  已合并到

  $attrs

  中，因此不再需要

  v-on=“$listeners”

  。看

• $scopedSlots

  现在只是

  $slots

  。看

---

Vue 2.6（v插槽语法）

所有普通插槽都将添加到作用域插槽中，因此您只需执行以下操作：

---

Vue 2.5

看

---

原始答案

您需要像这样指定插槽：

---

渲染功能

渲染（h）{
const children=Object.keys（this.$slots）.map（slot=>h（'template'，{slot}，this.$slots[slot]））
返回h（'包装器'[
h（‘b表’{
属性：这个。$attrs，
关于：$listeners，
scopedSlots:这个。$scopedSlots，
}，儿童）
])
}

---

您可能还希望在组件上设置为false。

我一直在使用

v-for

自动传递任何（和所有）插槽，如下所示。这种方法的好处在于，您不需要知道必须传递哪些插槽，包括默认插槽。传递到包装器的任何插槽都将被传递

---

这里是vue>2.6的最新语法，包括作用域插槽和常规插槽，感谢Nikita Polyakov

此文本内容将转到覆盖示例窗

FYI，这将在年内解决。但如果你现在想找到解决方案，这会有帮助。已测试：“Vue 2.6”的答案在使用命名插槽（在Vue 2.6.11上）时对我不起作用。如果我删除了部分

=“scope”

和

v-bind=“scope”

，它适用于命名插槽，但我不能再将其用于范围插槽：(