<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="ImportedStory.args">'</uibutton></code>)를 전달할 수 있다면 다음과 같습니다. 엄청난. 그러나 이것은 작동하지 않습니다. </p> <p>다음을 시도했지만 스토리북에서 <code>오류: 예기치 않은 식별자 '객체'</code> 오류가 발생했습니다. </p> <pre class="brush:php;toolbar:false;">const 비활성화된Args = ImportedStory.args const ButtonAsSlot 내보내기: 스토리 = { ...운동장, 렌더링: (args, { argTypes }) => 구성요소: { UICard, UIButton }, 소품: Object.keys(argTypes), 설정() { 반품 { ...인수, } }, 템플릿: ` <UICard v-bind="args"> <template v-if="$props.default" v-slot> <p>↓아래에 표시된 슬롯 내용</p> ${args.default} </템플릿> </UI카드> `, }), 인수: { ...Playground.args, 기본값: `<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 가져오기 '~/comComponents/Clickable/Button.vue'에서 UIButton 가져오기 '~/.storybook/utils'에서 { setDefaultProps } 가져오기 const 메타: 메타<UICard 유형> = { title: '요소/카드', 구성요소: UICard, 태그: ['autodocs'], } 기본 메타 내보내기 type Story = StoryObj<UICard 유형> const 플레이그라운드 내보내기: 스토리 = { 이야기: { 이름: '기본값', }, 렌더링: (args, { argTypes }) => ({ 구성요소: { UICard }, 소품: Object.keys(argTypes), 설정() { 반품 { ...인수, } }, 템플릿: ` <UICard v-bind="args"> <template 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"> <template v-if="$props.default" v-slot> <p>↓아래에 표시된 슬롯 내용</p> ${args.default} </템플릿> </UI카드> `, }), 인수: { ...Playground.args, 기본값: '<UIButton v-bind="{type: 'button', isDisabled: false, 변형: 'primary', label: 'test',}" />', }, }</pre> <p><br /></p>