Vue 中插槽的理解与使用_vue对插槽的理解-CSDN博客

本文链接：https://blog.csdn.net/lu4506527/article/details/109199053

Vue 中插槽的理解

一、什么是插槽
二、插槽的默认值(后备内容)
三、具名插槽(给插槽取具体的名字)
四、作用域插槽

一、什么是插槽

看一下官方解释：Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将元素作为承载分发内容的出口。说实在我是没有看懂，通过这几天的学习，对插槽有了个步初步的认识，以下是个人理解(大佬们勿喷(^__) )：插槽，是组件对外暴露的占位符，这个占位符(slot)可以是html、其他组件。当父组件使用这个组件的时候，<子组件名称>这里的内容原封不动会传递到子组件的slot里面</子组件名称>。这样就可以实现父组件可以自定义的修改子组件里面的布局。看着有点晕，看个栗子就明白了

定义一个test组件，并且使用该组件

// An highlighted block
	<body>
		<div id="app">
			<!-- 当前页面作为父类，使用子组件-->
			<test></test>
		</div>
	</body>
	<script>
		// 定义一个test组件
		Vue.component('test',{
			template:`
			<div> 
				我是子组件
			</div>`,
		})
		var app = new Vue({
			el:"#app"
		});
	</script>

显示：
在这里插入图片描述
2. 插槽的使用<slot></slot>

<body>
		<div id="app">
			<!-- 当前页面作为父类，使用子组件-->
			<test>
				<!-- 往子组件标签内写点东西 -->
				<div>
					我是从父组件过来的
				</div>
			</test>
		</div>
	</body>
	<script>
		// 定义一个test组件
		Vue.component('test',{
			template:`
			<div> 
				我是子组件
				<slot></slot>
			</div>`,
		})
		var app = new Vue({
			el:"#app"
		});
	</script>

在这里插入图片描述
如果在子组件中不使用<slot></slot>标签的话，父组件里面的<div>内容是不会显示出来的

以上就是对插槽的简单理解，再回过头看前面的理解，是不是恍然大悟很多呢

二、插槽的默认值(后备内容)

<body>
		<div id="app">
			<!-- 当前页面作为父类，使用子组件-->
			<test>
				<!-- 往子组件标签内写点东西 -->
				<!-- <div>
					我是从父组件过来的
				</div> -->
			</test>
		</div>
	</body>
	<script>
		// 定义一个test组件
		Vue.component('test',{
			template:`
			<div> 
				我是子组件
				<slot><div>当父组件没有任何html代码时，我使用插槽里面的默认代码</div></slot>
			</div>`,
		})
		var app = new Vue({
			el:"#app"
		});
	</script>

在这里插入图片描述

三、具名插槽(给插槽取具体的名字)

当子组件里面有多个插槽时，可以给插槽添加属性进行区分<slot name="my-slot1"></slot><slot name="my-slot2"></slot>，在父类组件中使用 <template slot="my-slot">这里是html内容</template>把代码块包裹起来。

<body>
		<div id="app">
			<!-- 当前页面作为父类，使用子组件-->
			<test>
				<!-- 往子组件标签内写点东西 -->
				<template slot="my-slot">
					<div>
						我是从父组件过来的，使用插槽111111
					</div>
				</template>
				<template slot="my-slot2">
					<div>
						我是从父组件过来的，使用插槽2222222
					</div>
				</template>
				<div>
					外部的数据是不会被写进子组件
				</div>
			</test>
		</div>
	</body>
	<script>
		// 定义一个test组件
		Vue.component('test',{
			template:`
			<div> 
				我是子组件
				<slot name="my-slot">
					
				</slot>
				<slot name="my-slot2">
					
				</slot>
			</div>`,
		})
		var app = new Vue({
			el:"#app"
		});
	</script>

在这里插入图片描述

在2.6中使用<template v-slot:my-slot>、<template v-slot:my-slot2> 这样使用具名插槽，并且 v-slot 只能添加在 <template> 上

四、作用域插槽

既然父组件的html代码会替换到子组件的 slot 标签里，那我们是不是可以在父组件的html中使用子组件的数据呢？答案是否定的，报了错误
在这里插入图片描述
作用域插槽的使用

<body>
		<div id="app">
			<!-- 当前页面作为父类，使用子组件-->
			<test>
				<!-- 往子组件标签内写点东西 -->
				<template v-slot:my-slot="props">
					<div>
						<h1>{{props}}</h1>
						<h1>{{props.data}}</h1>
					</div>
				</template>
			</test>
		</div>
	</body>
	<script>
		// 定义一个test组件
		Vue.component('test',{
			data:function(){
				return {
					childName:"子组件"
				};
			},
			template:`
			<div> 
				我是子组件
				<slot name="my-slot" v-bind:data="childName">
					
				</slot>
			</div>`,
		})
		var app = new Vue({
			el:"#app"
		});
	</script>