Vue插槽

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

分类：默认插槽、具名插槽、作用域插槽。

默认插槽

父组件中

<List>
    <h1>hello world</h1>
</List>

<script>

子组件中

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

具名插槽

父组件中

<List>
    //给插槽起个名字
    <template slot="插槽名">
        <h1>hello world</h1>
    </template>
</List>

子组件中

<template>
    <div>
        <slot name='插槽名'>插槽默认内容</slot>
    </div>
</template>

作用域插槽

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，数据在MyList组件中，但是用数据所遍历出来的结构由App组件决定

父组件中 

<List>
    <template scope="scopeData">
        <!-- 生成的是ul列表 -->
        <ul>
            <li v-for="l in scopeData.names" :key="l">
                {{l}}
            </li>
        </ul>
    </template>
</List>

<List>
    <template scope="scopeData">
        <ul>
            <!-- 生成的是h1标签 -->
            <h1 v-for="l in scopeData.names" :key="l">
                {{l}}
            </h1>
        </ul>
    </template>
</List>

 子组件中

<div class="category">
    //slot会把games交给父组件
    <slot :games="games" msg="hello">我是默认内容</slot>
<div>

<script>
    export default{
        name:"List",
        data(){
            return {games:["111","222","333"]}
        }
    }
</script>