【Vue】slot 插槽用法

最新推荐文章于 2024-05-29 17:42:35 发布

一颗不甘坠落的流星

最新推荐文章于 2024-05-29 17:42:35 发布

阅读量712

点赞数

分类专栏： Vue 全家桶文章标签： vue.js 具名插槽匿名插槽作用域插槽

本文链接：https://blog.csdn.net/qq_45677671/article/details/125944792

版权

Vue 全家桶专栏收录该内容

32 篇文章 49 订阅

订阅专栏

文章目录

具名插槽

具名插槽：<slot name="io"></slot>
使用方法，在使用子组件的时候，它的子级节点必须加 slot="io"
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<zhuban>
				<span slot="center">cpu</span>
				<span slot="io">显卡</span>
				<span slot="io">内存条</span>
				<span slot="io">硬盘</span>
			</zhuban>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件
			var zhuban = {
				template: `<div>
			                主板上都有：<br/>
			                <ul>
			                    <li>io:<slot name="io"></slot></li>
			                    <li>大脑:<slot name="center"></slot></li>
			                </ul>  
			            </div>`
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				components: {
					zhuban
				}
			})
		</script>
	</body>
</html>

运行结果：

匿名插槽

子组件中写的<slot></slot> 就做匿名插槽
使用子组件时，写在子组件中间的子级节点信息，可以插入到子组件的标签的位置
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<zhuban>
				<span>cpu</span>
				<span>显卡</span>
				<span>内存条</span>
				<span>硬盘</span>
			</zhuban>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件
			var zhuban = {
				template: `<div>
			                主板上都有：<slot></slot>
			            </div>`
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				components: {
					zhuban
				}
			})
		</script>
	</body>
</html>

运行结果：

在这里插入图片描述

作用域插槽

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 
			<child1>
				// 会报错，原因是在父组件中使用了子组件的变量
				{{user.firstName}}
			</child1> 
			-->
			<!-- 正确用法：v-slot 接收了从子组件传过来的参数 -->
			<child2 v-slot="name">
				<!-- 会报错，原因是在父组件中使用了子组件的变量 -->
				<!--作用域插槽可以将子组件的数据传给父组件，然后再父组件中调用子组件时使用-->
				{{name.myuser.firstName}}
				{{name.myuser.lastName}}
			</child2>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件1
			var child1 = {
				data() {
					return {
						user: {
							firstName: "yin",
							lastName: "ruifang"
						}
					}
				},
				template: `
			            <div>子组件
			                <slot></slot>
			            </div>
			            `
			}
			//子组件2
			var child2 = {
				data() {
					return {
						user: {
							firstName: "yin",
							lastName: "ruifang"
						}
					}
				},
				template: `
			            <div>子组件
			                <slot :myuser = "user"></slot>
			            </div>
			            `
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				components: {
					child1,
					child2,
				}
			})
		</script>
	</body>
</html>