作用域插槽

// 作用域插槽

<template>

      <div class="cateogry">

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

            <slot :games="games"> 我是默认的一些内容</slot>

      </div>

</template>

 

<script>

export default {

      name:'Category',

      props:['listData','title'],

      data(){

            return {

               games:['红色警戒','穿越火线','劲舞团','超级玛丽']

            }

        },

      methods: {

         

      },

}

</script>

------------

 <Category title="游戏">

            <template scope="row">  

                <ul>

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

                </ul>    

            </template>

           

         </Category>

       <Category title="游戏">

             <template scope="row">  

                <ol>

                    <li style="color:red;" v-for="(item,index) in row.games" :key="index">{{item}}</li>

                </ol>

             </template>

        </Category>

 

        <Category title="游戏">  

            <!-- slot-scope === scope     slot-scope 是新语法 -->

            <template slot-scope="{games}">  

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

             </template>

           

        </Category>

        ------------------