vue3的 renderSlot

在 Vue3 中，`renderSlot` 是用于模板渲染过程中的一个重要特性，它允许你在组件内部动态地插入子组件或插槽内容。`v-slot` 或 `slot` 的语法是用来声明插槽的，而 `renderSlot()` 函数则是从父组件传递给子组件的，子组件可以使用这个函数来访问并呈现来自父组件或者其他地方的插槽内容。

举个例子，如果你有一个自定义组件，它可以接受一个插槽(`<template slot-scope="props">...</template>`)，在该组件的 `render()` 函数中，你可以通过 `this.$slots.default` 或者 `this.$slots[slotName]` 来获取传入的插槽内容。然后根据需要动态地渲染这些内容，比如条件控制、数组循环等。

// 示例
export default {
  setup(props) {
    // 获取默认插槽的内容
    const slots = this.$slots.default;

    if (slots && slots.length > 0) {
      return () => {
        return slots.map(slot => {
          return h('div', {}, slot());
        });
      };
    } else {
      // 如果没有默认插槽，返回默认内容
      return 'No content provided';
    }
  },
};