slot 사용시 부모템플릿에서 자식컴포넌트의 매개변수 관리하기

* 부모템플릿
<자식컴포넌트>
    <template #default="slotProps"> // v-slot="slotProps" 
    {{ slotProps}} // { "index": '1', "test": "aaa"}
    </template>
</자식컴포넌트>

* 자식컴포넌트
let i = '1'
<div>
    <slot :index="i" test="aaa" />
</div>

* 부모템플릿
<자식컴포넌트>
    <template #header="headerProps"> // slot name="header"의 props가 전달된다
        {{ slotProps}} // { "index": '1', "test": "aaa"}
    </template>
    <template #default="{index,test}"> // 구조분해할당형식으로 표현가능
        {{ index }} // '1'
    </template>
     <p>{{ message }}</p>
</자식컴포넌트>

* 자식컴포넌트
let i = '1'
<div>
    <slot name="header" message="안녕"></slot>
    <slot :index="i" test="aaa" />
</div>

* 부모템플릿
<자식컴포넌트 :api-url="url" :per-page="10">
  <template #item="{ body, username, likes }">
    <div class="item">
      <p>{{ body }}</p>
      <p>by {{ username }} | {{ likes }} likes</p>
    </div>
  </template>
</자식컴포넌트>

* 자식컴포넌트
<ul>
  <li v-for="item in items">
    <slot name="item" v-bind="item"></slot>
  </li>
</ul>