06 Vue3插槽

6.9. 【slot】

1. 預設插槽

父元件中：
        <Category title="今日熱門遊戲">
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
        </Category>
子元件中：
        <template>
          <div class="item">
            <h3>{{ title }}</h3>
            <!-- 預設插槽 -->
            <slot></slot>
          </div>
        </template>

2. 具名插槽

父元件中：
        <Category title="今日熱門遊戲">
          <template v-slot:s1>
            <ul>
              <li v-for="g in games" :key="g.id">{{ g.name }}</li>
            </ul>
          </template>
          <template #s2>
            <a href="">更多</a>
          </template>
        </Category>
子元件中：
        <template>
          <div class="item">
            <h3>{{ title }}</h3>
            <slot name="s1"></slot>
            <slot name="s2"></slot>
          </div>
        </template>

3. 作用域插槽

1. 理解：資料在元件的自身，但根據資料生成的結構需要元件的使用者來決定。（新聞資料在News元件中，但使用資料所遍歷出來的結構由App元件決定）

2. 具體編碼：

   父元件中：
         <Game v-slot="params">
         <!-- <Game v-slot:default="params"> -->
         <!-- <Game #default="params"> -->
           <ul>
             <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
           </ul>
         </Game>
   
   子元件中：
         <template>
           <div class="category">
             <h2>今日遊戲榜單</h2>
             <slot :games="games" a="哈哈"></slot>
           </div>
         </template>
   
         <script setup lang="ts" name="Category">
           import {reactive} from 'vue'
           let games = reactive([
             {id:'asgdytsa01',name:'英雄聯盟'},
             {id:'asgdytsa02',name:'王者榮耀'},
             {id:'asgdytsa03',name:'紅色警戒'},
             {id:'asgdytsa04',name:'斗羅大陸'}
           ])
         </script>
   

7.