Vue slot 插槽

作用：让父组件可以向子组件指定位置插入html

默认插槽

<slot>我是默认的，使用者没有传递结构时我会出现</slot>

父组件：

<Category>
    <div>html结构</div>
</Category>

子组件：

<template>
    <div>
        <slot></slot>
    </div>
</template>

具名插槽

父组件：

<Category>
    <template slot="center">
        <div>html结构</div>
    </template>
    <template v-slot:footer>
        <div>html结构2</div>
    </template>
</Category>

子组件：

<template>
    <div>
        <slot name="center"></slot>
        <slot name="footer"></slot>
    </div>
</template>

作用域插槽

父组件：

<Category>
    <template scope="data">
        {{data.games}}
    </template>
    
    <template scope="{{games}}">
        {{games}}
    </template>
    
    <template slot-scope={{games}}>
        {{games}}
    </template>
</Category>

子组件：

<template>
    <div>
        // 但是作用域插槽要求，在slot上面绑定数据。也就是你得写成大概下面这个样子。
        <slot :games="games" msg="hello">默认内容</slot>
    </div>
</template>
data(){
    games:['']
}