Vue3 및 Storybook 7에서 슬롯을 처리하는 방법

Question

ButtonAsSlot 스토리에서 구성 요소(UIButton)를 다른 구성 요소(UICard)의 슬롯으로 전달하려고 합니다.

ButtonAsSlot 스토리에서는 default: '',를 args.default로 지정하므로 슬롯에 전달됩니다.

기존 스토리(예: default: '')를 전달할 수 있다면 다음과 같습니다. 엄청난. 그러나 이것은 작동하지 않습니다.

다음을 시도했지만 스토리북에서 오류: 예기치 않은 식별자 '객체' 오류가 발생했습니다.

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

매개변수의 기존 스토리를 사용하여 구성요소를 전달하고 슬롯에 설정하려면 어떻게 해야 하나요?

Vue3을 사용하고 있습니다. 코드는 아래와 같이 표시됩니다.

--Card.stories.ts

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

Answer 1

드디어 이렇게 코드를 작성했더니 제대로 작동했습니다.

으아악