Vue技术—插槽

作用

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

---

分类

默认插槽、具名插槽、作用域插槽

---

使用方式

1、默认插槽

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

子组件中：
<template>
	<div>
		<!--定义插槽-->
		<slot>插槽默认内容</slot>
	</div>
</template>

2、具名插槽

父组件中：
<Category>
	<template slot="center">
		<div>html结构</div>
	</template>
	
	<template v-slot:center>
		<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>
  		<li v-for="g in scopeData.games" :key="g">{{g}}</li>
  	</ul>
  </template>
  
  <template scope="scopeData">
  	<ol>
  		<li v-for="g in scopeData.games" :key="g">{{g}}</li>
  	</ol>
  </template>

  <template scope="scopeData">
  	<h3  v-for="g in scopeData.games" :key="g">{{g}}</h3>
  </template>
</Category>

子组件中：
<template>
  <div>
  	<!--定义插槽-->
  	<slot :games="games ">插槽默认内容</slot>
  </div>
  <script>
  	export default {
  		name:'Category',
  		data(){
  			return {
  				games:['绝地求生','使命召唤','战地']
  			}
  		}
  	}
  </script>
</template>