Javascript Vue:插槽的包装器忽略已定义的插槽

Vue对象有一个非常有用的成员，名为

$attrs

。它包含所有未被识别为当前组件的道具的属性。

$attrs

的一个很好的例子是

我想知道

$attrs

对于

$scopedSlots

是否有一个等价物。我目前正在使用一种类似于第一个建议的方法。

$scopedSlots

的问题是它也会通过已定义的插槽。要在此处使用该示例，请执行以下操作：

导出默认值{
道具：{
//让我们假设'b-table'有一个prop'foo'，它是默认的'false'`
傅：{
类型：布尔型，
默认值：true，
}
}
}

---

现在，由于

$attrs

的行为，

foo

不会被绑定两次，但是

mySlot

将被发送到

wrapper

和

b-table

那么除了我自己定义的那一个，我怎么能传递所有的槽呢

我的一个想法是

计算：{
bTableSlots（）{
Object.keys（此.$scopedSlots）
.filter（key=>key！=='mySlot'）
.reduce（（res，key）=>（res[key]=this.$scopedSlots[key]，res），{}）；
}
}

然后

我想知道是否有更好的方法。谢谢

那么，除了我自己定义的那一个插槽之外，如何传递所有的插槽呢

为什么这甚至是个问题？如果

没有名为

mySlot

的命名插槽，它将忽略它-最后它只是组件永远无法访问的

$scopedSlots

属性中的一个条目。而且，由于作用域插槽是作为函数传递的，因此您不需要支付任何额外的费用

当Vue编译器看到插槽的内容（

）时，它将获取该内容并将其编译到

VNode

s的

Array

或

VNode

s的返回

Array

的函数中，并将其传递给子组件。事实上，您的子组件将其进一步传递下去不会产生任何额外的成本。它是对现有阵列的引用或对现有函数的引用（适用于作用域插槽），在这两种情况下，如果进一步向下的组件不知道具有完全相同名称的插槽，则除了在

$scopedSlots

中还有一个条目外，没有额外的成本

如果您觉得这是一个问题，恐怕过滤是唯一的方法-您可以按照自己的方式或通过某个助手数组

['slot1'，'slot2']

定义所有现有

b-table

插槽并过滤所有其他内容（这不是更好的方法，因为每次

b-table

添加新插槽时都需要更新组件）

---

我理解这个想法，并看到了与

$attrs

的相似之处-组件上可能有

$unknownSlots

这样的东西来容纳当前组件未定义的插槽，但Vue公共API中现在没有这样的东西…

我更担心的是性能而不是命名冲突。您是说因为

$scopedSlots

是一个以

名称

s作为键的对象，所以若我向其中添加一个未使用的条目，它对性能的影响将最小？如果是这样，这是一个可接受的解决方案如果您添加“未使用”插槽，那么代价将是编译时间（在构建时）和内存+JS引擎解析所传递插槽的渲染函数所需的时间。但如果您通过“mySlot”，创建的函数将由您的组件使用（无浪费）。函数也被传递到“b表”

$scopedSlots

中这一事实与此无关……这是一样的function@MaxCoplan扩展我的答案，重点关注性能。希望现在一切都清楚了。。。