Vue插槽详解

        简介：插槽是一种实现组件之间通信的技术，能够实现父组件向子组件传递HTML结构的技术，注意不是传递数据，而是传递结构，这些结构包括：HTML元素、组件等。

目录

1、默认插槽

2、具名插槽

3、作用域插槽

4、Vue3.0的插槽

---

1、默认插槽

        之前我们已经知道通过在组件标签当作使用key:"values"写属性，就可以给子组件传递一些数据过去。那么我们可不可以给子组件传递一些HTML标签呢？答案是可以的，那么给子组件的标签体里面写的数据和HTML标签如何被子组件接收并进行展示呢？

        在父组件的模板当中，给子组件的标签体中添加一个HTML原生标签元素，如果需要子组件获取这个HTML元素，则需要在子组件的模板当中写一个<slot></slot>标签，这样才能接收到父组件传递过来的HTML元素。

<template>
	<div class="container">
		<Category title="美食" >
            //传递一个img标签结构给子组件
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

		<Category title="游戏" >
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>

        上面在父组件当中给子组件传递了一个img的HTML元素，下面的子组件的<slot>则会被对应的替换掉，如果没有正确接收到父组件传递过来的HTML元素，则会显示默认值。

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

2、具名插槽

        当父组件传递过去HTML元素不止一个，而且为了保证HTML文档流的顺序，则需要通过具体的名字指定哪个HTML元素放到哪个位置。

<template>
	<div class="container">
		<Category title="美食" >
			<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</Category>

		<Category title="游戏" >
			<ul slot="center">
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
			</div>
		</Category>

		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

        上面传递了两个HTML元素给子组件，下面在<slot>中使用name标注好name，让传递过来的HTML元素找到家。

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
        <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

3、作用域插槽

        通过默认插槽和具名插槽，我们已经知道这种方式的本质就是：给子组件传递数据的同时把一些结构带过去。那可不可以直接传结构过去，而不传数据过去呢？答案是可以的。使用作用域插槽就可以把结构传过去，而不传数据，数据使用子组件自己的。

        由于传过去的是结构，所以必须使用<template>结构<template>的形式，把结构使用<template>包起来。然后使用scope定义一个引用，这个引用就是子组件实例vc。这样就实现了值传递结构过去，还可以在父组件操作子组件的数据，实现子组件的数据向父组件传递。

        注意：在vue2.6.0之后，slot-scope被替换为v-slot指令。

父组件中：
		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

4、Vue3.0的插槽

• slot属性弃用，具名插槽通过指令参数v-slot:插槽名的形式传入，可以简化为#插槽名
• slot-scope属性弃用，作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性
• v-slot属性只能在template上使用，但在只有默认插槽时可以在组件标签上使用。

//Parent
<template>
  <child>
   <!--默认插槽-->
   <template v-slot>
     <div>默认插槽</div>
   </template>
   <!--具名插槽-->
   <template #header>
     <div>具名插槽</div>
   </template>
   <!--作用域插槽-->
   <template #footer="slotProps">
     <div>
      {
  
  {slotProps.testProps}}
     </div>
   </template>
  <child>
</template>

        主要区别：slot、slot-scope都是组件属性名。而v-slot是Vue指令，且外层必须包裹标签<template>，也就是v-slot必须写在<template>里面，也就是<template v-slot>，只有在父组件这么写，子组件仍然写slot标签。

1. 默认插槽slot改为：v-slot:default；
2. 具名插槽slot="nn"改为u：v-slot:nn;
3. 作用域插槽slot-scope="data_name"改为：v-slot:default="data_name"，其中default是插槽名字，data_name是子组件数据的引用对象。