我正在尝试将一个组件（UIButton）作为 ButtonAsSlot 故事中另一个组件（UICard）中的插槽传递。

在 ButtonAsSlot 故事中，我传递 default: '', 作为 args.default，因此它将在插槽中传递。

如果我可以传递现有的故事（例如默认值：''），那就太好了。然而，这是行不通的。

我尝试了以下操作，但出现错误错误：Storybook 上出现意外的标识符“对象”。

const disabledArgs = ImportedStory.args

export const ButtonAsSlot: Story = {
  ...Playground,
  render: (args, { argTypes }) => ({
    components: { UICard, UIButton },
    props: Object.keys(argTypes),
    setup() {
      return {
        ...args,
      }
    },
    template: `
      <UICard v-bind="args">
        <template v-if="$props.default" v-slot>
            <p>↓Content of slot displayed below</p>
            ${args.default}
        </template>
      </UICard>
    `,
  }),
  args: {
    ...Playground.args,
    default: `<UIButton v-bind="${disabledArgs}" />`,
  },

如何使用参数中的现有故事传递组件并将其设置在插槽中？

我使用的是Vue3。代码如下。

--Card.stories.ts

import type { Meta, StoryObj } from '@storybook/vue3'
import UICard from './Card.vue'
import UIButton from '~/components/Clickable/Button.vue'
import { setDefaultProps } from '~/.storybook/utils'

const meta: Meta<typeof UICard> = {
  title: 'Elements/Card',
  component: UICard,
  tags: ['autodocs'],
}

export default meta

type Story = StoryObj<typeof UICard>

export const Playground: Story = {
  story: {
    name: 'Default',
  },
  render: (args, { argTypes }) => ({
    components: { UICard },
    props: Object.keys(argTypes),
    setup() {
      return {
        ...args,
      }
    },
    template: `
      <UICard v-bind="args">
        <template v-if="$props.default" v-slot>
            ${args.default}
        </template>
      </UICard>
    `,
  }),
}

setDefaultProps(Playground, UICard)

export const ButtonAsSlot: Story = {
  ...Playground,
  story: {
    name: 'Button as slots',
  },
  render: (args, { argTypes }) => ({
    components: { UICard, UIButton },
    props: Object.keys(argTypes),
    setup() {
      return {
        ...args,
      }
    },
    template: `
      <UICard v-bind="args">
        <template v-if="$props.default" v-slot>
            <p>↓Content of slot displayed below</p>
            ${args.default}
        </template>
      </UICard>
    `,
  }),
  args: {
    ...Playground.args,
    default: '<UIButton v-bind="{type: 'button', isDisabled: false, variant: 'primary', label: 'test',}" />',
  },
}