Vue ith Composition API의 슬롯 이해-JS 튜토리얼-php.cn

Understanding Slots in Vue ith Composition API

슬롯은 구성 요소가 상위 구성 요소에 의해 사용자 정의될 수 있는 콘텐츠 영역을 정의할 수 있도록 하는 Vue의 강력한 메커니즘입니다. 이는 UI 구성요소 구축 시 재사용성과 유연성을 향상시킵니다. Vue 3는 두 가지 기본 슬롯 유형을 제공합니다:

일반 슬롯: 상위 구성 요소의 콘텐츠를 하위 구성 요소의 템플릿에 삽입하는 간단한 방법을 제공합니다.
범위가 지정된 슬롯: 하위 구성 요소에서 슬롯 콘텐츠로 데이터(범위)를 전달하여 상위 및 하위 데이터를 기반으로 동적 렌더링을 활성화함으로써 더욱 고급 사용자 정의가 가능합니다.

Vue 3에서 슬롯을 사용하면 콘텐츠를 하위 구성 요소에 전달하는 방법을 제공하여 유연한 구성 요소를 만들 수 있습니다. Composition API는 슬롯 사용 방식을 향상시켜 더욱 직관적이고 강력하게 만듭니다.

슬롯이란 무엇입니까?

슬롯은 구성 요소가 사용될 때 사용자 정의 콘텐츠로 채워질 수 있는 구성 요소의 자리 표시자 콘텐츠를 정의하는 방법입니다. 재사용 가능하고 사용자 정의 가능한 구성 요소를 만드는 데 도움이 됩니다.

슬롯 유형

기본 슬롯: 가장 일반적인 유형으로, 특정 이름 없이 콘텐츠를 전달할 수 있습니다.
이름이 지정된 슬롯: 고유한 이름으로 다양한 슬롯을 지정할 수 있어 더 복잡한 레이아웃이 가능합니다.
범위 지정 슬롯: 슬롯을 사용하여 하위 구성 요소의 데이터를 상위 구성 요소에 노출하는 방법을 제공합니다. Composition API로 슬롯 사용

Composition API로 슬롯 사용

Composition API를 사용하여 Vue 3 구성 요소에서 슬롯을 정의하고 사용하는 방법은 다음과 같습니다.
기본 슬롯의 예

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

로그인 후 복사

사용법:

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

로그인 후 복사

명명된 슬롯

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

로그인 후 복사

사용법:

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

로그인 후 복사

범위가 지정된 슬롯

범위 지정 슬롯을 사용하면 하위 구성요소의 데이터를 상위 구성요소로 다시 전달할 수 있습니다.

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

로그인 후 복사

사용법:

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

로그인 후 복사

예: Vue 3의 슬롯을 사용한 식품 배달

Composition API 및 슬롯과 함께 Vue 3를 사용하여 간단한 음식 배달 애플리케이션을 만들어 보겠습니다. 이 예에서는 슬롯을 사용하여 머리글 및 바닥글과 함께 음식 목록을 표시하는 기본 FoodDelivery 구성 요소를 보여줍니다.

1단계: 메인 구성요소 생성

머리글, 음식 항목 및 바닥글에 대해 명명된 슬롯을 허용하는 FoodDelivery 구성 요소는 다음과 같습니다.

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

로그인 후 복사

2단계: 식품 항목 구성요소 생성

다음으로 개별 식품을 나타내는 간단한 FoodItem 구성 요소를 만들어 보겠습니다.

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

로그인 후 복사

3단계: 구성 요소 사용

이제 FoodDelivery 및 FoodItem 구성 요소를 사용하는 상위 구성 요소에 모든 것을 함께 넣어 보겠습니다.

설명하겠습니다

FoodDelivery 구성 요소: 이 구성 요소는 음식 배달 서비스의 레이아웃 역할을 합니다. 헤더, 음식 항목용 기본 슬롯, 바닥글 등 3개의 슬롯을 허용합니다.
FoodItem 구성 요소: 개별 식품을 나타냅니다. 이름과 가격을 소품으로 사용하며 장바구니에 항목을 추가하는 시뮬레이션 방법이 있습니다.

앱 구성 요소: 모든 것이 하나로 통합되는 상위 구성 요소입니다. FoodDelivery 구성 요소를 사용하며 환영 메시지, FoodItem 구성 요소 목록 및 감사 메시지로 슬롯을 채웁니다.

사용 사례

목록 사용자 정의: 범위 지정 슬롯은 각 항목이 속성에 따라 고유한 렌더링 논리를 가질 수 있는 목록 구성 요소를 만드는 데 이상적입니다. 하위 구성 요소는 항목 데이터를 슬롯에 전달할 수 있으며 상위 구성 요소는 범위가 지정된 슬롯을 사용하여 각 항목에 대한 템플릿을 정의할 수 있습니다. (BasePaginated.vue)
조건부 렌더링: 범위 지정 슬롯은 슬롯에 제공하는 데이터를 기반으로 하위 구성 요소 내에서 선택적 렌더링을 활성화합니다. 예를 들어 슬롯 콘텐츠 내에서 메시지나 오류 상태를 조건부로 표시할 수 있습니다.
복잡한 레이아웃: 범위가 지정된 슬롯을 사용하면 레이아웃의 다양한 부분을 상위 구성 요소로 사용자 정의할 수 있는 동시에 하위 구성 요소가 범위를 사용하여 특정 콘텐츠나 기능을 삽입할 수 있는 더욱 복잡한 레이아웃을 생성할 수 있습니다.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

로그인 후 복사

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

로그인 후 복사

고급 고려 사항

이름이 지정된 범위 슬롯: 범위가 지정된 슬롯(예: ...)에 이름을 할당하여 단일 하위 구성 요소 내에 여러 범위가 지정된 슬롯을 갖고 상위 구성 요소에서 이름으로 참조할 수 있습니다.
슬롯 기능: Vue 2에서는 슬롯이 하위 구성 요소 내에서 $slots로 액세스되었습니다. Vue 3는 슬롯 콘텐츠에 대한 액세스를 제공하는 기능인 $scopedSlots를 사용하여 보다 반응적인 접근 방식을 제공합니다. 이를 통해 하위 구성 요소 내에서 동적 슬롯 조작 및 조건부 렌더링이 가능합니다.

범위가 지정된 슬롯 예시를 더욱 명확하고 기능적으로 개선해 보겠습니다. 이 예에서는 범위가 지정된 슬롯을 사용하여 하위 구성 요소에서 상위 구성 요소로 항목 데이터를 전달하여 유연한 렌더링을 허용하는 방법을 보여줍니다.

1단계: ItemList 구성 요소 생성

이 구성요소는 항목 목록을 표시하고 범위가 지정된 슬롯을 사용하여 상위 항목이 각 항목이 렌더링되는 방식을 맞춤설정할 수 있도록 합니다.

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

로그인 후 복사

2단계: 범위가 지정된 슬롯과 함께 ItemList 구성 요소 사용

이제 ItemList 구성 요소를 사용하고 범위가 지정된 슬롯을 사용하여 각 항목을 렌더링하기 위한 사용자 정의 템플릿을 제공하는 상위 구성 요소를 만들어 보겠습니다.

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

로그인 후 복사

항목 목록 구성 요소:

이 구성요소는 항목 목록을 정의하고 범위가 지정된 슬롯을 사용하여 각 항목을 상위 구성요소에 노출합니다.
슬롯이 제공되지 않으면 기본적으로 항목 설명이 표시됩니다. ###상위 구성 요소:
이 구성 요소는 ItemList를 사용하고 각 항목을 렌더링하기 위한 사용자 정의 템플릿을 제공합니다.
범위가 지정된 슬롯을 통해 항목 데이터에 액세스하며 클릭 시 기능을 실행하는 버튼이 포함되어 있습니다.

이 예에서는 Vue 3에서 범위가 지정된 슬롯을 효과적으로 사용하여 유연하고 재사용 가능한 구성 요소 구조를 만드는 방법을 보여줍니다. 상위 구성 요소는 하위 구성 요소가 제공하는 데이터에 계속 액세스하면서 각 항목의 렌더링을 사용자 정의할 수 있습니다.

요약해보자

이 예에서는 Vue 3 애플리케이션의 슬롯을 활용하여 유연한 음식 배달 구성 요소 시스템을 만드는 방법을 보여줍니다. 기본 구성 요소를 수정하지 않고도 머리글, 바닥글, 콘텐츠를 쉽게 사용자 정의할 수 있습니다. 더 궁금하신 점이나 더 자세한 내용이 필요하시면 댓글로 질문해주세요.

Composition API를 통해 Vue 3의 일반 및 범위 지정 슬롯을 효과적으로 활용하면 재사용 가능성과 사용자 정의가 가능한 UI 구성요소를 구축하여 Vue 애플리케이션의 유지 관리성과 코드 구성을 향상할 수 있습니다. 특정 콘텐츠 삽입 및 동적 렌더링 요구 사항에 따라 적절한 슬롯 유형을 선택할 수 있습니다.
성장하는 길은 연결입니다.
즐거운 코딩하세요!

위 내용은 Vue ith Composition API의 슬롯 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!