如何从Vue的包装器组件访问孩子的道具？

Question

我在营销网站上有很多Vue组件。有状态和功能（也称为无状态）组件。例如徽章和按钮。我需要创建一个用于测试目的的包装器组件，该组件可以使用任何组件，渲染该组件，但还需要在下面添加一个带有props-values的表，并与子组件一起传递。例如：

<XButton hello="hi" :some-other-prop="2" label="Hey">You Will Never Appear</XButton>

将使用以下信息呈现给Button标记：

 <button>Such text with label Hey</button>
 some-other-prop | 2 
 label           | Hey

Button.js

Vue.component('XButton', {
  name: 'XButton',
  functional: true,
  props: {
    label: {
      type: String,
      default: 'Default text',
    },
  },
  render(createElement, context) {
    return createElement('button', context.data, 'Such text with label ' + context.props.label);
  },
});

Wrapper.vue

<template>
   <div>
    <slot/>
   </div>    
</template>

<script>
  export default {
   functional: true,
   props: {
     listPropsOfDoubleNestedChild: {
       type: Boolean,
       default: false
     }
   },
   render(createElement, context) {      
     const vNode= context.props.listPropsOfDoubleNestedChild
      ? context.children[0].children // or even get props of double nested child
      : context.children[0];

     if (vNode.componentOptions) {
       console.log("Props of nested stateful component", vNode.componentOptions.propsData);
     } else {
      console.log("Props of nested stateless component are not reachable thru componentOptions", vNode.componentOptions);
     }

      return null;
  }
</script>

App.vue

  <template>
     <Wrapper>
        <XButton hello="hi" :some-other-prop="2" label="Hey">You Will Never Appear</XButton>
     </Wrapper>
  </template>

所以，我只能获得状态组件的传递道具。

一些截图：

状态组件：

功能组件：

在React中，用React.Children.only(props.children).props完成非常简单，Vue又如何呢？