scopedSlots

4、在 render 函数中的使用 $slots/$scopedSlots
有了上面内容的铺垫，可以看到，不论是 $slots 还是 $scopedSlots ，它们的属性都是父组件向子组件注入的内容决定的，只不过 $scopedSlots可以再向父组件抛出数据

它们是在模板上编写 后 Vue 替你进行的下一步操作。
现在我们在 render 上自己执行它们

就第一个 slots 的例子来改，可以改为

<template>
  <div>
    我是子组件！
    <slot>我是默认插槽的后备内容</slot>
    <br>
    <slot name="content">我是具名插槽 content 的后备内容</slot>
    <br>
    <slot name="other">我是具名插槽 other 的后备内容</slot>
  </div>
</template>
--------------------------------------------变为了-------------------------------------------
render(_c) {
    let def = this.$slots.default;
    def || (def = "我是默认插槽的后备内容");

    let con = this.$slots.content;
    con || (con = "我是具名插槽 content 的后备内容");

    let oth = this.$slots.other;
    oth || (oth = "我是具名插槽 other 的后备内容");
    return _c("div", [
      "我是子组件!",
      _c("br"),
      def,
      _c("br"),
      con,
      _c("br"),
      oth,
    ]);
  },

对于 $scopedSlots，使用起来也大同小异

<template>
  <div>
    我是子组件！
    <br>    
    <slot text="我是默认插槽"></slot>
    <br>
    <slot name="content" text="我是具名插槽content"></slot>
    <br>
    <slot name="other" text="我是具名插槽other"></slot>
  </div>
</template>
--------------------------------------------变为了-------------------------------------------
---------------注意！ 示例没有进行类型检查，但是开发时无法保证所有的插槽正确、完整书写，---------
---------------需要类型检查或提供默认值，见下方注释--------------------------------------------
render(_c) {
    // 如果要提供后备内容可以通过 判断 this.$scopedSlots.xxx 不为函数后渲染默认内容等方式
    // 这里省略
    let def = this.$scopedSlots.default({
      text: "我是默认插槽",
    });

    let con = this.$scopedSlots.content({
      text: "我是具名插槽content",
    });

    let oth = this.$scopedSlots.other({
      text: "我是具名插槽other",
    });
    return _c("div", [
      "我是子组件!",
      _c("br"),
      def,
      _c("br"),
      con,
      _c("br"),
      oth,
    ]);
  },

5、使用 scopedSlots
它不同于 $scopedSlots,它是存在于 render数据对象 中的一个对象
效果是获取 子组件向父组件 抛出的内容而不是抛出内容给父组件

就以刚刚的父组件为例！

<child>
    <template v-slot:default="prop">
      {{ prop }}
    </template>
    <template v-slot:content="prop">
      {{ prop }}
    </template>
    <template v-slot:other="prop">
      {{ prop }}
    </template>
 </child>
 --------------------------------------------变为了-------------------------------------------
 ---------------注意！ 示例没有进行类型检查，但是开发时无法保证所有的插槽正确、完整书写，-----------
 render(_c) {
    return _c("child", {
      scopedSlots: {
        default(prop) {
          // 对应 v-slot:default="prop"
          return prop;
        },
        content(prop) {
          // 对应 v-slot:default="prop"
          return prop;
        },
        other(prop) {
          // 对应 v-slot:default="prop"
          return prop;
        },
      },
    });
  },