(Vue.js) 슬롯 (Slots) 은 어떻게 활용할 수 있을까

// ChildSlotComponent.vue 특정 컴포넌트 로부터 정의 당하는(?) 자식 컴포넌트
<template>
  <div class="container">
    <header>
      <slot name="header"><h1>정의 된게 없으면 기본값 표출할래요 🐒</h1></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
<script>
  export default {
      name: 'ChildSlotComponent',
  }
</script>

// App.vue 자식 컴포넌트 내용을 정의하는 상위 컴포넌트 
<template>
  <div id="app">
    <child-slot-component>
      <template v-slot:header>
        <h1>여기에 Header의 내용을 넣을거에요 👶🏻</h1> <!-- 이곳을 주석 처리 하면? -->
      </template>
      <h3>이부분은 어디에 들어갈까요?</h3>
      <template v-slot:footer>
        <h1>Footer 를 정의합니다. 🦶🏻</h1>
      </template>
    </child-slot-component>
  </div>
</template>

<script>
import ChildSlotComponent from './components/slots/ChildSlotComponent.vue'

export default {
  name: 'App',
  components: {
    ChildSlotComponent
  }
}
</script>

// 자식 컴포넌트의 데이터 user 바인드
<template>
  <div>
    <slot name="myName" v-bind:user="user">
        <input :value="user.lastName">
    </slot>
  </div>
</template>
<script>
  export default {
      name: 'ScopeSlotComponent',
      data() {
          return {
              user: {
                  firstName: 'Sunny',
                  lastName: 'Kim'
              },
          }
      }
  }
</script>

// 자식 컴포넌트의 데이터를 slotProps 파라미터로 받아 온다.
<template>
  <div id="app">
    <scope-slot-component>
      <template v-slot:myName="slotProps"> <!-- slotProps: 자식에서 슬롯 요소에서 바인딩 시킨 user 데이터를 가지고 있음 -->
        <input :value="slotProps.user.lastName">
      </template>
    </scope-slot-component>
  </div>
</template>

<script>
import ScopeSlotComponent from './components/slots/ScopeSlotComponent.vue'
export default {
  name: 'App',
  components: {
    ScopeSlotComponent,
  }
}
</script>