Vue2中插槽使用——默认插槽、具名插槽、作用域插槽

插槽(slot)

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

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

3. 元素作为组件模板之中的内容分发插槽。 元素自身将被替换。

4. 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

默认插槽

category.vue

<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>

App.vue

<template>
	<div class="container">
		<category title="美食" >
			<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 {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《小鞋子》']
			}
		},
	}
script>

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

显示：

具名插槽

元素有一个特殊的 attribute：name。通过该属性可以将内容放在指定的插槽里。

category.vue

<template>
	<div class="category">
		<h3>{{title}}分类h3>
		
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1slot>
		<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2slot>
	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>

App.vue：

• v-slot:xxx 只能添加在