Vue之插槽使用

最新推荐文章于 2025-04-07 15:52:16 发布

攻城狮Luke（刘健彬）

最新推荐文章于 2025-04-07 15:52:16 发布

阅读量432

点赞数

分类专栏： Vue/Vuex 文章标签： slot vue 插槽

本文链接：https://blog.youkuaiyun.com/u010739551/article/details/81197200

版权

Vue/Vuex 专栏收录该内容

4 篇文章

订阅专栏

插槽简介

示例代码

运行结果

插槽简介

vue通过插槽和具名插槽可以向子组件传递dom元素，子组件可以在template通过<slot>标签引用即可。

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插槽slot</title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="app">
			<child>
				<!-- 向子组件child传递dom元素-->
				<h1>h1 title</h1>
			</child>
			
			<body-component>
				<!-- 向子组件传递多个dom元素 通过slot属性区分（具名插槽slot）-->
				<div slot='header'>header</div>
				<div slot='footer'>footer</div>
			</body-component>
		</div>
		
		<script>
			//子组件child使用<slot></slot>接收外部传入的dom元素
			Vue.component('child',{
				template: `<div>
									 <p>content</p>
									 <slot><p>默认dom<p></slot>
								  </div>`
			})
			
			//子组件用<slot></slot>接收外部传入的多个元素，使用name区分具名slop
			Vue.component('body-component',{
				template: `<div>
									 <slot name='header'></slot>
									 <p>body content</p>
									 <slot name='footer'></slot>
								  </div>`
			})
			
			var app = new Vue({
				el: '#app'
			})
		</script>
		
	</body>
</html>