我怎样才能只接受一个组件作为 vue 中的插槽

Question

我有一个按钮组组件，我希望该组件只接受我创建为插槽的按钮组件。

所以这是我的 ButtonGroup 组件：

<template>
  <div class="button-group">
    <slot />
  </div>
</template>

<script lang="ts">

export default {
  name: 'ButtonGroup',

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

如何只接受 Button 组件作为插槽？

Answer 1

使用渲染 function

<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

Answer 2

<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>

export default {
  name: 'ButtonGroup',

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

//Use of ButtonGroup component`enter code here`

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