<p>Ich versuche, eine Komponente (UIButton) als Slot in einer anderen Komponente (UICard) in der ButtonAsSlot-Story zu übergeben. </p> <p>In der ButtonAsSlot-Story übergebe ich <code>default: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',} ">',</uibutton></code> als args.default, sodass es im Slot übergeben wird. </p> <p>Wenn ich eine vorhandene Story übergeben könnte (z. B. <code>default: '<uibutton v-bind="ImportedStory.args">'</uibutton></code>), dann wäre das so Großartig. Dies funktioniert jedoch nicht. </p> <p>Ich habe Folgendes versucht, aber die Fehlermeldung <code>Fehler: Unerwarteter Bezeichner 'Objekt' </code> erhalten. </p> <pre class="brush:php;toolbar:false;">const invalidArgs = ImportedStory.args export const ButtonAsSlot: Story = { ...Spielplatz, render: (args, { argTypes }) => Komponenten: { UICard, UIButton }, Requisiten: Object.keys(argTypes), aufstellen() { zurückkehren { ...argumente, } }, Vorlage: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓Inhalt des unten angezeigten Slots</p> ${args.default} </template> </UICard> `, }), Argumente: { ...Playground.args, Standard: `<UIButton v-bind="${disabledArgs}" />`, },</pre> <p>Wie kann ich eine Komponente mithilfe einer vorhandenen Story in einem Parameter übergeben und in einem Slot festlegen? </p> <p>Ich verwende Vue3. Code wird wie folgt angezeigt.</p> <p>--Card.stories.ts</p> <pre class="brush:php;toolbar:false;">import type { Meta, StoryObj } from '@storybook/vue3' UICard aus './Card.vue' importieren UIButton aus „~/components/Clickable/Button.vue“ importieren importiere { setDefaultProps } aus '~/.storybook/utils' const meta: Meta<typeof UICard> = { Titel: 'Elemente/Karte', Komponente: UICard, Tags: ['autodocs'], } Standard-Meta exportieren type Story = StoryObj<typeof UICard> export const Playground: Story = { Geschichte: { Name: 'Standard', }, render: (args, { argTypes }) => ({ Komponenten: { UICard }, Requisiten: Object.keys(argTypes), aufstellen() { zurückkehren { ...argumente, } }, Vorlage: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> ${args.default} </template> </UICard> `, }), } setDefaultProps(Playground, UICard) export const ButtonAsSlot: Story = { ...Spielplatz, Geschichte: { Name: 'Button als Slots', }, render: (args, { argTypes }) => ({ Komponenten: { UICard, UIButton }, Requisiten: Object.keys(argTypes), aufstellen() { zurückkehren { ...argumente, } }, Vorlage: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓Inhalt des unten angezeigten Slots</p> ${args.default} </template> </UICard> `, }), Argumente: { ...Playground.args, Standard: '<UIButton v-bind="{type: 'button', isDisabled: false, Variante: 'primary', label: 'test',}" />', }, }</pre> <p><br /></p>

import { Disabled } from 'disabled.stories'

export const ButtonAsSlot: Story = {
  ...Playground,
  args: {
    ...Playground.args,
    disabledArgs: {
      ...Disabled.args,
    },
    default: '<UIButton v-bind="disabledArgs" />',
  },
}