<p>我正在嘗試將一個元件（UIButton）作為 ButtonAsSlot 故事中另一個元件（UICard）中的插槽傳遞。 </p> <p>在ButtonAsSlot 故事中，我傳遞<code>default: '<uibutton v-bind="{type: 'button', isDisabled: false,variant: 'primary', label: 'test ',} ">',</uibutton></code> 作為args.default，因此它將在插槽中傳遞。 </p> <p>如果我可以傳遞現有的故事（例如<code>預設值：'<uibutton v-bind="ImportedStory.args">'</uibutton></code>），那麼就太好了。然而，這是行不通的。 </p> <p>我嘗試了以下操作，但出現錯誤<code>錯誤：Storybook 上出現意外的識別碼「物件」</code>。 </p> <pre class="brush:php;toolbar:false;">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}" />`, },</pre> <p>如何使用參數中的現有故事傳遞元件並將其設定在插槽中？ </p> <p>我用的是Vue3。代碼如下。</p> <p>--Card.stories.ts</p> <pre class="brush:php;toolbar:false;">從 '@storybook/vue3' 導入型別 { Meta, StoryObj } 從 './Card.vue' 導入 UICard 從 '~/components/Clickable/Button.vue' 導入 UIButton 從 '~/.storybook/utils' 導入 { setDefaultProps } const meta: Meta = { title: '元素/卡', 組件：UI卡， 標籤：['自動文件']， } 導出預設元 type Story = StoryObj; 匯出 const Playground: 故事 = { 故事： { 名稱：'預設'， }, 渲染：(args, { argTypes }) => ({ 元件：{UICard}， 道具：Object.keys（argTypes）， 設定() { 返回 { ....參數， } }, 模板：` <UICard v-bind="args"> <模板 v-if="$props.default" v-slot> ${args.default} </範本> </UI卡> `, }), } setDefaultProps（遊樂場，UICard） 匯出 const ButtonAsSlot: 故事 = { ……操場， 故事： { name: '按鈕作為插槽', }, 渲染：(args, { argTypes }) => ({ 元件：{ UICard，UIButton }， 道具：Object.keys（argTypes）， 設定() { 返回 { ....參數， } }, 模板：` <UICard v-bind="args"> <模板 v-if="$props.default" v-slot> <p>↓下方顯示的插槽內容</p> ${args.default} </範本> </UI卡> `, }), 參數：{ ...遊樂場.args， 預設值：''， }, }</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" />',
  },
}