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元素&#