Vue 插槽

# 插槽
    1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的放肆，适用于 父组件===>子组件
    2.分类：默认插槽、具名插槽、作用域插槽
    3.使用方式：
        a.默认插槽
            父组件中：
                <Category><div>html结构1</div></Category>
            子组件中：
                <template><div><slot>插槽内容(该处内容将会由父组件中的html结构覆盖)...</slot></div><template>
        b.具名插槽：
            父组件中：
                <Category>
                    <template slot="center"><div>html结构1(该处结构替换子组件中插槽名为“center”的插槽)</div><template>
                    <template v-slot=footer><div>html结构2(该处结构替换子组件中插槽名为“footer”的插槽)</div><template>
                </Category>
            子组件中：
                <template><div>
                    <slot name="center">插槽内容(该处内容将会由父组件中的html结构覆盖)...</slot>
                    <slot name="footer">插槽内容(该处内容将会由父组件中的html结构覆盖)...</slot>
                </div><template>
        c.作用域插槽：
            理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。
            父组件中：
                <Category title="美食">
                    <template scope="categoryObj">
                    <ul>
                        <li v-for="(data, index) in categoryObj.foods" :key="index">{{data}}</li>
                    </ul>
                    <img slot="foot" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
                    </template>
                    
                </Category>
                <Category title="美食">
                    <template scope="{foods,msg}">
                    <ul>
                        <li style="color:red" v-for="(data, index) in foods" :key="index">{{data}}</li>
                    </ul>
                    <img slot="foot" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
                    <h1>{{msg}}</h1>
                    </template>
                </Category>
            子组件中：
                <template>
                    <div class="category">
                    <h3>{{title}}</h3>
                    <slot :foods="foods" msg="test">这是default插槽</slot>
                    </div>
                    
                </template>
                <script>
                export default {
                    name: 'Category',
                    props:['title'],
                    data(){
                    return {
                        foods:['火锅','烧烤','小龙虾','牛排'],
                    }
                    }
                }
                </script>