动态 slot 透传并获取 slotProps 数据

slot 透传并获取 slotProps

// grandparent
<Parent :first-day-of-week="0" :test-prop="1999999999" :date="new Date()">
  <template v-slot:monthCellRender="slotProps">
    <h2>
        month: {{ slotProps.month }}
    </h2>
  </template>
  <template v-slot:dateCellRender="slotProps">
    <h3 style="background-color: #eef;">
      date: {{ slotProps.date }}
  </h3>
  </template>
</Parent>

// parent component(Parent)
<Child>
  <template v-for="(value, slotKeyName) in $scopedSlots" v-slot:[slotKeyName]="slotProps">
    <slot :name="slotKeyName" v-bind="slotProps"></slot>
    <div :key="slotKeyName">{{ slotKeyName }}</div>
  </template>
</Child>

// child
<slot name="dateCellRender" v-bind="item"></slot>

从 2.6.0 开始，这个 $scopedSlots 有两个变化：

1. 作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。
2. 所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。

参考资料：
https://cn.vuejs.org/v2/api/#slot
https://cn.vuejs.org/v2/api/#vm-scopedSlots
动态插槽名：https://cn.vuejs.org/v2/guide/components-slots.html#%E5%8A%A8%E6%80%81%E6%8F%92%E6%A7%BD%E5%90%8D