在Vue中的递归组件中传递限定作用域的插槽

<template>
  <div>
    <div>{{ name }}</div>
    <template v-if="children.length">
      <div v-for="child in children" :key="child.id">
        <recursive-component :name="child.name">
          <template v-slot:default="slotProps">
            <div>{{ slotProps.name }}</div>
          </template>
        </recursive-component>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'recursive-component',
  props: {
    name: String,
    children: Array
  }
}
</script>