vue学习（六）插槽的使用

最新推荐文章于 2025-09-24 12:34:22 发布

原创最新推荐文章于 2025-09-24 12:34:22 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析Vue中的插槽机制，包括匿名插槽和实名插槽的使用方法，以及如何通过name属性定制组件内容，为开发者提供清晰的指导。

插槽分为匿名插槽和实名插槽。匿名插槽就可以随便插入内容。实名插槽必须按照一定的规则插入内容

匿名插槽

<div id="app">
			<my-slot>
				<img src="img/aa.png"/>				
			</my-slot>
		</div>
		
		<template id="slot">
			<div>
				<h2>插槽的头部</h2>
				<slot>如果没有内容则显示默认的提示文字</slot>
				<h2>插槽的尾部</h2>
			</div>
		</template>
		
		<script>
			Vue.component('my-slot',{
				template:"#slot"
			})
			
			new Vue({
				el:"#app"
			})
		</script>

在<my-slot>标签中你可以随便插入内容。如果没有内容则直接显示提示的文字。

重点是给slot加一个name属性。

<body>
		<div id="app">
			<my-comouted>
				<div slot="cpu">
					Inter
				</div>		
				<div slot="memory">内存条</div>
			</my-comouted>
		</div>
		
		<template id="my_comouted">
			<div>
				<slot name="cpu">这里是插CPU</slot>
				<slot name="gpu">这里是插GPU</slot>
				<slot name="memory">这里是插内存条</slot>
				<slot name="hard-drive">这里是插硬盘</slot>
			</div>
		</template>
		
		<script>
			Vue.component('my-comouted',{
				template:"#my_comouted"
			})
			
			new Vue({
				el:"#app"
			})
		</script>
	</body>