初识 Vue（19）---（Vue 中使用插槽(slot)）_vue判断插槽是否被使用-优快云博客

本文链接：https://blog.youkuaiyun.com/jianghao233/article/details/81263278

本文介绍了在 Vue 中如何使用插槽解决子组件内容由父组件传递的问题，包括无名插槽和具名插槽的使用，以及插槽设置默认样式的方法。通过插槽，可以提高代码的可读性和组件的复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 中使用插槽(slot)

案例：子组件中的一部分内容是根据父组件传递来的 DOM 来进行显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child content='<p>Dell</p>'></child>
	</div>	
	<script>
	Vue.component('child',{
		props:['content'],
		template:'<div><p>hello</p><div v-html="this.content"></div></div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

输出：

存在问题：1.通过 content 传值，想直接使用里面的 <p> ,必须在外面包裹一层 DIV；

2.用这种方法向子组件传值时，当传递的数值过多时会造成代码可读性很差

子组件中的一部分内容是根据父组件传递来的 DOM 来进行显示的时候，可以使用插槽的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child>
			<p>Dell</p>  
		</child>
	</div>	
	<script>
	Vue.component('child',{
		props:['content'],
		//获取插槽内容
		template:'<div> <p>Hello</p><slot></slot></div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

输出：

slot 还可以设置默认样式

<body>
	<div id="root">
		<child>
			 
		</child>
	</div>	
	<script>
	Vue.component('child',{
		props:['content'],
		//获取插槽内容
		template:'<div> <p>Hello</p><slot>默认内容</slot></div>'
		
	})

输出：

功能：输出，其中 header 部分和 footer 部分均由父组件传入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<body-content>
			  <div class="header" slot='header'>header</div>
			  <div class="footer" slot='footer'>footer</div>
		</body-content>
	</div>	
	<script>
	Vue.component('body-content',{

		//获取插槽内容
		template:'<div>
                  <slot name='header'></slot>
                   <div class='content'>content</div>
                    <slot name='footer'></slot>
                    </div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

给每一个插槽给定具体的名字称为具名插槽（可以有多个，也可以有默认值，但插槽只能有一个）

输出：

具名插槽默认值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<body-content>
	
			  <div class="footer" slot='footer'>footer</div>
		</body-content>
	</div>	
	<script>
	Vue.component('body-content',{

		//获取插槽内容
		template:'<div>
                  <slot name='header'>default header</slot>
                   <div class='content'>content</div>
                    <slot name='footer'></slot>
                    </div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

输出：