vue中插槽的使用

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

2. 分类: 默认插槽,具名插槽,作用域插槽

3. 使用方式:

   1. 默认插槽

   父组件中:
   	<category>
           <div>html结构1</div>
       </category>
   子组件中:
   	<category>
           <div>
           <slot>插槽默认内容</slot>
           </div>
       </category>
   

   2. 具名插槽

   父组件中:
   	<category>
           <template slot="center">
           	<div>html结构1</div>
           </template>
   		<template v-slot:footer>
           	<div>html结构2</div>
           </template>
       </category>
   子组件中:
   	<category>
           <div>
           <slot name"center">插槽默认内容</slot>
   		<slot name="footer">插槽默认内容</slot>
           </div>
       </category>
   

   3. 作用域插槽:

      1. 理解: 数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

      2. 具体编码:

父组件:
  <Category title="游戏">
       <template scope="{games}">
         <ul>
          <li v-for="(item, index) in games" :key="index">{{ item }}</li>
         </ul>
       </template>
   </Category>
        
   <Category title="游戏">
       <template scope="{games}">
        <h4 v-for="(item, index) in games" :key="index">{{ item }}</h4>
       </template>
   </Category>
        
        子组件:
        	<slot :games="games">我是默认的一些内容</slot>
        
        <script>
        export default {
            name:'Category',
            props:['title'],
            data() {
            return {
              games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
            }
          }, 
        }
        </script>
        ````