Vue插槽

插槽

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

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

3.默认插槽

父组件中：
<Category>
     <div>html结构</div>
</Category>

子组件中：
<div>
     <slot>插槽默认内容，如果父组件给插槽传递数据，则展示传递的html结构，否则展示默认内容</slot>
</div>

4.具名插槽：

父组件中：
<Category>
     <div slot="center">   指定插槽的名称
          <div>html结构</div>
     </div>
      <template v-slot:footer>  指定插槽的名称，但v-slot:footer只能使用在template标签上
          <div>html结构</div>    使用template标签，解析时该标签不会出现在html结构中
     </template>
      <template slot="footer">  template也可以直接使用slot="footer"，两种方式皆可
          <div>html结构</div>    可以往footer插槽多次指定内容
     </template>
</Category>

子组件中：
<template>
     <div>
          <slot name="center">插槽默认内容</slot>
          <slot name="footer">插槽默认内容</slot>
     </div>
</template>

5.作用域插槽：

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

父组件中：
<Category>
     <template scope="scopeData">   用scope接收子组件传递过来的数据   
           <ul>
              <li v-for="g in scopeData.games" :key="g">{{g}}</li>
           </ul>
     </template>
</Category>
<Category>
     <template scope="{games}">   
           <ol>
              <li v-for="g in games" :key="g">{{g}}</li>
           </ol>
     </template>
</Category>
<Category>
     <template slot-scope="{games}">  scope与slot-scope均可用来接收数据，使用方法相同 
              <h3 v-for="g in games" :key="g">{{g}}</h3>
     </template>
</Category>

子组件中：
<template>
     <div>
          <slot :games="games">插槽默认内容</slot> 通过：games="games"给父组件传递数据，这里也可                                                                       以使用具名插槽，不冲突
     </div>
</template>

export default{
    data(){
        return{
            games:['1','2','3']
        }
    }
}