组件递归slot插槽传值

最近写了一个类似el-tree的组件，需要在父组件中用slot插槽，看了下el-tree的写法，略微复杂，后来网上查了一下，参考了一个可行相对简单的方法（https://juejin.cn/post/7222931700438138937）：

使用页面：

<template>
  <div>
    <MyTree :data="treeData">
      <template v-slot="{label, value}">
        <div>{{ label }}</div>
        <el-button type="text">{{ value }}</el-button>
      </template>
    </MyTree>
  </div>
</template>
<script>
import MyTree from './MyTree'

export default {
  components: {
    MyTree
  },
  data () {
    return {
      treeData: [
        {
          label: '父节点',
          value: 102,
          children: [
            {
              label: '子节点1',
              value: 20,
              children: [
                {
                  label: '孙节点1-1',
                  value: 30
                }
              ]
            },
            {
              label: '子节点2',
              value: 13,
              children: [
                {
                  label: '孙节点2-1',
                  value: 20
                },
                {
                  label: '孙节点2-2',
                  value: 10
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

子组件：MyTree

<template>
  <div class="my-tree">
    <MyTreeNode v-for="(item, index) in data" :key="index" :data="item">
      <template v-slot="{ label, value }">
        <slot :label="label" :value="value"></slot>
      </template>
    </MyTreeNode>
  </div>
</template>
<script>
import MyTreeNode from './MyTreeNode'

export default {
  name: 'MyTree',
  components: {
    MyTreeNode
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  }
}
</script>

孙组件：MyTreeNode

<template>
  <div class="tree">
    <slot :label="data.label" :value="data.value"></slot>
    <div v-for="(item, index) of data.children" :key="index">
      <!-- 显示title标题 -->
      <div class="title">
        <!-- 插槽，这里也是把title传出去, A插槽 -->
        <slot :label="item.label" :value="item.value"></slot>
      </div>
      <!-- 如果存在子项则调用本身组件 递归 -->
      <template v-if="item.children">
        <MyTreeNode v-for="(it, ind) in item.children" :data="it" :key="ind">
          <!-- B 插槽 -->
          <slot :label="it.label" :value="it.value"></slot>
        </MyTreeNode>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyTreeNode',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>