vue中的slot如何使用

最新推荐文章于 2024-07-26 13:02:41 发布

ZGSouth

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量339

点赞数

分类专栏：前端 vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_29005819/article/details/110945932

版权

本文介绍了Vue中插槽的概念，包括默认插槽的用途，具名插槽如何在子组件中预留多个位置供父组件插入内容，以及作用域插槽的进阶特性，允许父组件访问子组件传递的数据，通过实例详细解析了三种插槽的用法。

摘要由CSDN通过智能技术生成

1.什么是插槽

Vue里面的插槽是什么？
简单理解就是为多余的代码提供位置的地方
是一个占位符
可以理解占位符就是我们input标签里的placeholder,如果我们不输入就显示默认的，如果我们提供了，就显示我们提供的数据
举个例子（我们定义一个组件Header，然后在另一个组件Main使用它）

// 这是MyHedader组件
<template>
	<section>
		<div class="logo">logon<div>
		<div class="middle">middle</div>
		<div class="userInfo">userInfo</div>
	<!--说明1：这里定义的插槽就是收集父组件传过来的多余的信息-->
	<!--说明2：若父组件没有传递东西过来，那么就会显示默认的-->
	<!--说明3：若父组件有传递，那么就会显示父组件传过来的-->
		<slot>
			<p>默认的信息<p>
		</slot>  
	</section>
</template>

// 这是Main组件
<template>
	<section>
		<MyHeader>
			<h4>我们写的东西<h4>
		</MyHeader>  
<!--说明：1、这是我们正常使用组件,可以给它传属性，但是不会在组件中间写东西-->
<!--说明：2、如果我们写了，若子组件无slot，则会忽略我们写的内容-->
<!--说明：3、若子组件有slot，那么内容将会在slot里面呈现-->
	</section>
</template>