[Vue3] Slot 프로퍼티 (자식 컴포넌트 ▶️ 부모 컴포넌트)

1. 자식 컴포넌트 슬롯에 프로퍼티 작성

• <slot />에 name과 age 프로퍼티를 작성한다.

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :age="age" :phone="phone"></slot>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  data() {
    return {
      age: 30,
  	  phone: '010-1234-1234',
    };
  },
};
</script>

2. 부모 컴포넌트에서 해당 프로퍼티 사용

• <template #default>를 통해 프로퍼티를 받아 <template> 영역 안에서 사용할 수 있다.

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template #default="{ age, phone }">
        <p>age : {{ age }}</p>
        <p>phone : {{ phone }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

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

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

📍 슬롯에 이름이 있는 경우 아래와 같이 사용

• name을 통해 슬롯명을 설정할 수 있다.

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="body" :age="age" :phone="phone"></slot>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  data() {
    return {
      age: 30,
  	  phone: '010-1234-1234',
    };
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent>
      <template #body="{ age, phone }">
        <p>age : {{ age }}</p>
        <p>phone : {{ phone }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

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

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