Vue如何跨组件传递Slot的实现

<data-tree>
 <template v-slot:node="data">
   <div>{{data.title}} - {{data.text}}</div>
  </template>
</data-tree>

<data-tree>
 <data-tree-item>
   <template :node="data">
      <slot :data="data"> xxx </slot>
    </template>
  </data-tree-item>
</data-tree>

h('data-tree-item',{
 scopedSlots: {
    node: props => this.$slots.node(props)
  },
})

const rootComponentName = 'data-tree'
/
  获取父组件
 /
const getRootComponent = (
  ponent: ComponentInternalInstance | null
): ComponentInternalInstance | undefined => {
  if (ponent && ponent.type.name === rootComponentName) {
    return ponent
  }

  if (ponent && ponent.parent) {
    const parent = ponent.parent
    return getRootComponent(parent)
  }
}

setup(props) {
    // 获取根节点
    const dataTree = getRootComponent(getCurrentInstance())
    const parentSlots = dataTree?.slots
    const nodeTemplate = parentSlots?.node as any
    return {
      nodeTemplate
    }
  }

ponents: {
    TemplateContainer: {
      functional: true,
      props: {
        template: {
          type: Function
        },
        data: {
          type: Object
        }
      },
      render: (props, ctx) => h('div', [props.template(props.data)])
    }
  }

 <template-container
          v-if="nodeTemplate"
          :template="nodeTemplate"
          :data="node">
</template-container>
<template v-else>
    {{ node.label }}
</template>

<slot :data="node" name="node">
 {{ node.label }}
</slot>