<p>J'essaie de transmettre un composant (UIButton) comme emplacement dans un autre composant (UICard) dans l'histoire ButtonAsSlot. </p> <p>Dans l'histoire ButtonAsSlot, je passe <code>default: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',} ">',</uibutton></code> comme args.default, il sera donc transmis dans l'emplacement. </p> <p>Si je pouvais transmettre une histoire existante (par exemple <code>default : '<uibutton v-bind="ImportedStory.args">'</uibutton></code>), alors ce serait super. Cependant, cela ne fonctionne pas. </p> <p>J'ai essayé ce qui suit, mais j'ai obtenu l'erreur <code>Erreur : identifiant inattendu de l'objet </code> sur Storybook. </p> <pre class="brush:php;toolbar:false;">const désactivéArgs = ImportedStory.args exporter const ButtonAsSlot : Histoire = { ...Cour de récréation, rendu : (args, { argTypes }) => composants : { UICard, UIButton }, accessoires : Object.keys (argTypes), installation() { retour { ...arguments, } }, modèle : ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓Contenu de l'emplacement affiché ci-dessous</p> ${args.default} </modèle> </UICard> ', }), arguments : { ...Aire de jeux.args, par défaut : `<UIButton v-bind="${disabledArgs}" />`, },</pré> <p>Comment puis-je transmettre un composant en utilisant une histoire existante dans un paramètre et le définir dans un emplacement ? </p> <p>J'utilise Vue3. le code s'affiche comme ci-dessous.</p> <p>--Card.stories.ts</p> <pre class="brush:php;toolbar:false;">type d'importation { Meta, StoryObj } depuis '@storybook/vue3' importer UICard depuis './Card.vue' importer UIButton depuis '~/components/Clickable/Button.vue' importer { setDefaultProps } depuis '~/.storybook/utils' const meta : Meta<typeof UICard> = { titre : 'Éléments/Carte', composant : UICard, balises : ['autodocs'], } exporter la méta par défaut tapez Story = StoryObj<typeof UICard> export const Aire de jeu : Histoire = { histoire: { nom : 'Par défaut', }, rendu : (args, { argTypes }) => ({ composants : { UICard }, accessoires : Object.keys (argTypes), installation() { retour { ...arguments, } }, modèle : ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> ${args.default} </modèle> </UICard> ', }), } setDefaultProps (aire de jeux, UICard) exporter const ButtonAsSlot : Histoire = { ...Cour de récréation, histoire: { nom : 'Bouton comme emplacements', }, rendu : (args, { argTypes }) => ({ composants : { UICard, UIButton }, accessoires : Object.keys (argTypes), installation() { retour { ...arguments, } }, modèle : ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓Contenu de l'emplacement affiché ci-dessous</p> ${args.default} </modèle> </UICard> ', }), arguments : { ...Aire de jeux.args, par défaut : '<UIButton v-bind="{type : 'bouton', isDisabled : false, variante : 'primary', label : 'test',}" />', }, }</pré> <p><br /></p>

import { Disabled } from 'disabled.stories'

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