Vue3 と Storybook 7 でスロットを処理する方法

Question

<p>ButtonAsSlot ストーリーで、コンポーネント (UIButton) を別のコンポーネント (UICard) のスロットとして渡そうとしています。 </p> <p>ButtonAsSlot ストーリーでは、<code>default: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',} を渡します。 ">',</uibutton></code> を args.default として設定するため、スロットに渡されます。 </p> <p>既存のストーリー (例: <code>default: '<uibutton v-bind="輸入ストーリー.args">'</uibutton></code>) を渡すことができれば、次のようになります。素晴らしくなるように。しかし、これはうまくいきません。 </p> <p>次のことを試しましたが、エラー <code>Error:Storybook で予期しない識別子 'object' </code> が発生しました。 </p> <pre class="brush:php;toolbar:false;">constdisabledArgs = 輸入ストーリー.args エクスポート const ButtonAsSlot: ストーリー = { ...遊び場、 render: (args, { argTypes }) => ({ コンポーネント: {UICard、UIButton}、 小道具: Object.keys(argTypes)、 設定（） { 戻る { ...引数、 } }、 テンプレート: ` <UICard v-bind="args"> <テンプレート v-if="$props.default" v-slot> <p>↓下に表示されるスロットの内容</p> ${args.default} </テンプレート> </UICard> `、 })、 引数: { ...Playground.args, デフォルト: `<UIButton v-bind="${disabledArgs}" />`, },</pre> <p>既存のストーリーを使用してコンポーネントをパラメータに渡し、スロットに設定するにはどうすればよいですか? </p> <p>Vue3 を使用しています。コードは以下のように表示されます。</p> <p>--Card.stories.ts</p> <pre class="brush:php;toolbar:false;">インポート タイプ { Meta, StoryObj } から '@storybook/vue3' 「./Card.vue」からUICardをインポートします '~/components/Clickable/Button.vue' から UIButton をインポートします import { setDefaultProps } から '~/.storybook/utils' const meta: メタ = { タイトル: 'エレメント/カード', コンポーネント: UICard、 タグ: ['autodocs']、 } デフォルトのメタをエクスポートする type Story = StoryObj import const プレイグラウンド: ストーリー = { 話： { 名前: 'デフォルト'、 }、 render: (args, { argTypes }) => ({ コンポーネント: { UICard }、 小道具: Object.keys(argTypes)、 設定（） { 戻る { ...引数、 } }、 テンプレート: ` <UICard v-bind="args"> <テンプレート v-if="$props.default" v-slot> ${args.default} </テンプレート> </UICard> `、 })、 } setDefaultProps(プレイグラウンド、UICard) エクスポート const ButtonAsSlot: ストーリー = { ...遊び場、 話： { 名前: 'スロットとしてのボタン', }、 render: (args, { argTypes }) => ({ コンポーネント: {UICard、UIButton}、 小道具: Object.keys(argTypes)、 設定（） { 戻る { ...引数、 } }、 テンプレート: ` <UICard v-bind="args"> <テンプレート v-if="$props.default" v-slot> <p>↓下に表示されるスロットの内容</p> ${args.default} </テンプレート> </UICard> `、 })、 引数: { ...Playground.args, デフォルト: '<UIButton v-bind="{タイプ: 'ボタン', isDisabled: false, バリアント: 'プライマリ', ラベル: 'テスト',}" />', }、 }</pre> <p><br /></p>

Answer 1

最終的にこのようなコードを書いたところ、うまくいきました。

リーリー