Umgang mit Slots in Vue3 und Storybook 7

Question

Ich versuche, eine Komponente (UIButton) als Slot in einer anderen Komponente (UICard) in der ButtonAsSlot-Story zu übergeben.

In der ButtonAsSlot-Story übergebe ich default: '', als args.default, sodass es im Slot übergeben wird.

Wenn ich eine vorhandene Story übergeben könnte (z. B. default: ''), dann wäre das so Großartig. Dies funktioniert jedoch nicht.

Ich habe Folgendes versucht, aber die Fehlermeldung Fehler: Unerwarteter Bezeichner 'Objekt' erhalten.

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}" />`,
  },

Wie kann ich eine Komponente mithilfe einer vorhandenen Story in einem Parameter übergeben und in einem Slot festlegen?

Ich verwende Vue3. Code wird wie folgt angezeigt.

--Card.stories.ts

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',}" />',
  },
}

Answer 1

最后我像这样编写了代码并且它起作用了。

import { Disabled } from 'disabled.stories'

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