使用渲染函数

<script>
import {h} from 'vue';

export default {
  name: 'ButtonGroup',
  render() {
    const buttons = []
    for (let defaultElement of this.$slots.default()) {
      // case: <button />
      if (defaultElement.type === 'button') {
        buttons.push(defaultElement)
      }
      
      // other component
      // if (defaultElement.type.name === 'Button') {
      //   buttons.push(defaultElement)
      // }
    }
    return h('div', {class: 'button-group'}, buttons)
  }
};
</script>

我在这里引用了https://vuejs.org/api/render-function.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div class="button-group">
    <slot name="button">
     <Button />
    </slot>

  </div>
</template>

<script lang="ts">

export default {
  name: 'ButtonGroup',

  components: {
    Button,
  },
};
</script>

//Use of ButtonGroup component`enter code here`

<ButtonGroup>
 <template #button />
</ButtonGroup>