Vue插槽slot

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件通信方式，适用于父组件===>子组件

2.分类：

（1）默认插槽

父组件中：
    <cate>
        <div>html结构</div>
    </cate>
子组件中：
    <template>
        <div>
            <!--定义插槽-->
            <slot></slot>
        </div>
    </template>

（2）具名插槽

父组件中:
        <cate>
            <template slot="center">
                <div>html结构</div>
            </template> 

            <template v-slot:"footer">
                <div>html结构</div>
            </template>
        </cate>
子组件中：
            <template>
                <div>
                    //定义插槽
                    <slot name="center">默认内容</slot>
                    <slot name="footer">默认内容</slot>
                </div>
            </template> 

（3）作用域插槽

1.理解;数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在cate组件中，但使用数据所遍历出来的结构由App组件决定）
父组件中：
        <cate>
            <template scope="scopeData">
                //生成的是ul列表
                <ul>
                    <li v-for="item in scopeData.games" :key="item">{{item}}</li>
                </ul>
            </template>
        </cate>

        <cate>
            <template slot-scope="scopeData">
                //生成的是h4标题
                
                    <h4 v-for="item in scopeData.games" :key="item">{{item}}</h4>
               
            </template>
        </cate>
子组件中：
        <template>
            <div>
                <slot :games="games">
            </div>
        </template>

        <script>
            export default{
                    name:'cate',
                    props:['title'],
                    //数据在子组件自身
                    data(){
                            return{
                                games:['1','2','3','4']
                            }
                            }
                }
        </script>