Vue学习笔记-插槽

插槽

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

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

3. 使用方式：

   1. 默认插槽

   父组件:
   <Category>
   	<div>插入的html结构</div>
   </Category>
   
   子组件:
   <template>
   	<div>
   		<!--定义插槽的位置-->
   		<slot>此处可写一些默认的html内容，但以后会被父组件中插入的html结构替换</slot>
   	</div>
   </template>
   

   2. 具名插槽

   父组件:
   <Category>
   	<template slot="center">
   		<div>插入的html结构1</div>
   	</template>
   	<template v-slot:footer>
   		<div>插入的html结构2</div>
   	</template>
   </Category>
   
   子组件:
   <template>
   	<div>
   		<!--定义插槽-->
   		<slot name="center">默认插槽内容...</slot>
   		<slot name="footer">默认插槽内容...</slot>
   	</div>
   </template>
   

   3. 作用域插槽
      1. 理解：数据在子组件中，但数据的生成结构需要组件的使用者来决定（父组件）
      2. 具体编码

      父组件:
      <Category>
      	<template scope="scopeData">
      		<!--生成的是ul列表-->
      		<ul>
      			<li v-for="(g,index) in scopeData.games" :key="index">{{g}}</li>
      		</ul>
      	</template>
      </Category>
      <Category>
      	<template>
      		<!--生成的是h4标签-->
      		<h4 v-for="(g,index) in scopeData.games" :key="index">{{g}}</h4>
      	</template>
      </Category>
      
      子组件:
      <template>
      	<div>
      		<slot :games="games"></slot>
      	</div>
      </template>
      
      <script>
      	export default{
      		name:'Category',
      		data(){
      			return{
      				games:['DNF','LOL','CF','CS_Online']
      			}
      		}
      	}
      </script>