具名插槽

// 具名插槽

 <div class="cateogry">

        <h3>{{title}}分类</h3>

        <!-- 定义插槽 -->

        <slot name="center">这里填写默认值1</slot>

        <slot name="footer">这里填写默认值2</slot>

    </div>  <Category title="美食">

            <img slot="center" src="https://oss.aolb.top/public/uploads/goods/1645257691_95884.jpg" alt="">

            <a   slot="footer" href="">更多美食</a>

        </Category>

        <Category title="游戏">

            <ul slot="center">

                <li v-for="(item,index) in games" :key="index">{{item}}</li>

            </ul>

            <div class="foot" slot="footer">

              <a   href="">单机游戏</a>

              <a   href="">网络游戏</a>

            </div>  

        </Category>

        <Category title="电影"  :listData = "films">

             <video slot="center" controls src="https://vd2.bdstatic.com/mda-ncdc2rtehub4stud/sc/cae_h264_delogo/1647246823480856991/mda-ncdc2rtehub4stud.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1647253754-0-0-6d3d871bf53369cabfb57ec4e66b6fe7&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3554886392&vid=6066766601970603776&abtest=100815_2-17451_2&klogid=3554886392"></video>

              <!-- <template  slot="footer"> -->

              <template  v-slot:footer>

                <div class="foot">

                    <a   href="">经典</a>

                    <a   href="">热门</a>

                    <a   href="">推荐</a>

                </div>  

                <h4>欢迎前来观影</h4>

             </template>

               

        </Category>