Vue**插槽**

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

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

3.使用方式：

(1).默认插槽：

父组件：

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

子组件：

 <template>
    <div>
      <!-- 定义插槽 -->
      <slot>我是默认插槽，当使用者没有传递具体结构时，我会出现1</slot>
    </div>
</template>

(2).具名插槽

父组件：

				<Category title="美食" > 
                    <img slot="center" src="./assets/logo.png" alt="">
                    <a slot="footer" href="#">更多美食</a>
                </Category>
                    <template v-slot:footer>
                        <div class="foot">
                        <a href="#">经典</a>
                        <a href="#">热门</a>
                        <a href="#">推荐</a>
                        </div>
                        <h4>欢迎观看</h4>
                    </template>

子组件：

 <template>
    <div class="category">
      <h3>{{title}}分类</h3>
      <slot name="center">我是默认插槽，当使用者没有传递具体结构时，我会出现1</slot>
      <slot name="footer">我是默认插槽，当使用者没有传递具体结构时，我会出现2</slot>
    </div>
</template>

(3).作用域插槽

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

父组件：

	                <Category title="游戏">
                        <template scope="atguigu">
                        <ul>
                         <li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
                        </ul>
                        </template>
                    </Category>
                    <Category title="游戏">
                        <template scope="{games}">
                        <ol>
                            <li v-for="(g,index) in games" :key="index">{{g}}</li>
                        </ol>
                        </template>
                    </Category>
                    <Category title="游戏">
                        <template slot-scope="{games}">
                            <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
                        </template>
                    </Category>

子组件：

  <template>
    <div class="category">
       <h3>{{title}}分类</h3>
       <slot :games="games">我是默认插槽，当使用者没有传递具体结构时，我会出现1</slot>
    </div>
 </template>
 <script>
   export default {
     name:'Category',
     props:['title'],
     data() {
     return {
          games:['红色警察','穿越火线','劲舞团','超级玛丽'],
           }
     },
  }
</script>