vue 作用域插槽

Question

vm.$slots 可以获取插槽节点

// 子组件
<slot :name="th.key" :row="tr"></slot>

父级别
 <template v-slot:KzName>
  <span >
    {{row}}
  </span>
</template>

这样在 slot中 created 打印vm.$slots 返回kzName

但是改为作用域插槽后 打印就是{}

<template #kzName="{ row }">
<span >

{{row}}

</span>
</template>

Answer 1

vm.$slots 是获取静态插槽内容的属性，直接得到每个插槽相应的 Vnode 节点，你的第一种写法 v-slot:KzName 或 #KzName 都是用作静态插槽。静态插槽的实现是在组件初始化刚开始的时候就去拿渲染后的内容，它定义在 initRender 方法中，并且这个方法的初次调用先于 created，所以一开始可以在 created 里得到有值的内容。

作用域插槽的获取一定要使用 vm.$scopedSlots，你后面的写法就是作用域插槽。并且在获取它的时候要在 mounted 里才能拿到，这是由于作用域插槽在组件初始化中要等到其他变量初始完才能正确获取变量的值，它的第一次赋值要等到组件渲染时才完成。虽然 $scopedSlots 的初始化也是在 initRender 方法里，但那时很明显只是给了它一个空对象，它的赋值是在 _render 方法中，所以你在渲染函数中是可以拿到的。

关于这两个属性的具体实现参考一下源码中的render.js

Answer 2

作用域插槽 现在使用v-slot:name="data" name指插槽名字，data为插槽prop属性组成的对象(可解构)。
上述你的插槽没有起名，name就是default，正确使用方式：

 <template v-slot:default="{ row, name }">
  <span >
    {{row}}
  </span>
</template>