Vue.js에서 v-slot 디렉티브를 활용한 데이터 전달과 렌더링

by

Vue.js는 강력한 컴포넌트 기반 프레임워크로, 부모 컴포넌트와 자식 컴포넌트 간에 데이터와 동작을 전달하고 조작하는 데 다양한 기능을 제공합니다. 이 중에서도 v-slot 디렉티브는 슬롯(slot)을 통해 데이터를 자식 컴포넌트로 전달하고 렌더링하는 데 특히 유용합니다. 이 블로그 포스트에서는 v-slot 디렉티브의 사용법과 예제를 살펴보겠습니다.


v-slot 디렉티브란?

v-slot 디렉티브는 Vue.js에서 컴포넌트 간 데이터 전달과 렌더링을 위해 사용되는 디렉티브 중 하나입니다. 부모 컴포넌트에서 자식 컴포넌트로 HTML 요소나 컴포넌트를 전달하고, 자식 컴포넌트에서 이를 받아서 렌더링하는 데 활용됩니다. v-slot은 주로 부모 컴포넌트에서 자식 컴포넌트로 전달되는 컨텐츠를 커스터마이징하거나 동적으로 생성하는 데 사용됩니다.


기본 사용법

v-slot을 사용하여 데이터를 자식 컴포넌트로 전달하고 렌더링하는 기본적인 사용법을 살펴보겠습니다.


부모 컴포넌트

<template>
  <div>
    <!-- 자식 컴포넌트에 슬롯을 통해 데이터 전달 -->
    <ChildComponent>
      <!-- 슬롯 정의 -->
      <template v-slot:default="slotProps">
        <p>{{ slotProps.message }}</p>
        <button @click="slotProps.updateMessage">메시지 업데이트</button>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>


자식 컴포넌트

<template>
  <div>
    <!-- 부모 컴포넌트에서 전달된 슬롯 사용 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '안녕하세요!',
    };
  },
  methods: {
    updateMessage() {
      this.message = '슬롯을 통해 업데이트된 메시지입니다.';
    },
  },
};
</script>

위의 예제에서는 다음과 같은 주요 단계를 수행합니다:

  1. 부모 컴포넌트에서 ChildComponent를 호출하면서 v-slot 디렉티브를 사용하여 슬롯을 정의합니다.
  2. 자식 컴포넌트인 ChildComponent에서는 슬롯을 <slot></slot>으로 사용하여 부모 컴포넌트에서 전달된 내용을 렌더링합니다.
  3. 슬롯에는 slotProps라는 변수를 사용하여 부모 컴포넌트에서 전달된 데이터와 메소드에 접근합니다.



슬롯을 통한 데이터 전달과 상호작용

v-slot 디렉티브를 사용하면 부모 컴포넌트와 자식 컴포넌트 사이의 데이터 전달과 상호작용을 쉽게 구현할 수 있습니다. 위의 예제에서는 메시지를 전달하고 메시지를 업데이트하는 예제를 살펴보았습니다.

데이터 추가하기

슬롯을 사용하여 데이터를 자식 컴포넌트로 전달할 때, 다양한 데이터를 추가할 수 있습니다. 이 예제에서는 이름과 이메일을 자식 컴포넌트로 전달하겠습니다.

<template>
  <div>
    <!-- 자식 컴포넌트에 슬롯을 통해 데이터 전달 -->
    <ChildComponent>
      <!-- 슬롯 정의 -->
      <template v-slot:default="slotProps">
        <p>이름: {{ slotProps.name }}</p>
        <p>이메일: {{ slotProps.email }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>


자식 컴포넌트

<template>
  <div>
    <!-- 부모 컴포넌트에서 전달된 슬롯 사용 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['name', 'email'],
};
</script>

부모 컴포넌트에서 ChildComponent를 호출할 때, v-slot을 사용하여 name과 email 속성을 전달합니다. 자식 컴포넌트에서는 이러한 데이터를 props를 통해 받아와서 렌더링합니다


Leave a Comment