Vue slot插槽

最新推荐文章于 2024-04-02 16:07:42 发布
最新推荐文章于 2024-04-02 16:07:42 发布
阅读量77 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53037175/article/details/120620896
版权

Vue slot 父子组件 参数传递 占位符
关键词由CSDN通过智能技术生成

slot插槽：在模板中保留位置，使用的时候可以根据具体情况扩展

通过slot插槽向组件内部指定位置传递内容，也可以通过slot可以父子传参

slot标签需要取name值，占位符需要取slot值，这两个值保持一致

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<v-header>
				<h2 slot="title">推荐</h2>
			</v-header>

			<v-header>
				<h2 slot="title">首页</h2>
		    </v-header>

			<v-header>
				<h2 slot="title">推荐</h2>
			</v-header>
		</div>

		<template id="header">
			<main>
				<h1>logo</h1>
				<slot name="title"></slot>
				<p>
					签到
					三
				</p>
				<hr>
			</main>
		</template>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				components:{
					'v-header':{
						template:'#header'
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
另外需注意的是

<v-header>
    <h2 slot="title1">推荐</h2>
</v-header>

或者

<v-header>
	<h2>推荐</h2>
</v-header>

是不显示内容的

想看花开
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue系列之 插槽(Slot) 详解
共同学习，共同成长
05-28 3974
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
Vue slot用法(小结)
12-11
之前看官方文档，由于自己理解的偏差，不知道slot是干嘛的，看到小标题，使用Slot分发内容，就以为 是要往下派发内容。然后就没有理解插槽的概念。其实说白了，使用slot就是先圈一块地，将来可能种花种菜，也有可能在这块地上建房子。然而slot可以以一当十，可以插入很多东西。不知明白否？ 由于项目经验有限，这篇我就先跟着官网的知识点走，当然会加入自己的部分项目代码。 关于slot是这样说的， 除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签
Vue -- 插槽
emmmm.....
04-27 1万+
文章目录插槽1. 插槽2. 体验插槽的基础用法2.1 没有预留插槽组件标签内的内容会被丢弃2.2 后备内容3. 具名插槽3.1 为具名插槽提供内容3.2 具名插槽的简写形式4. 作用域插槽4.1 解构作用域插槽的 Prop把information的数据解构出来4.2 声明作用域插槽4.3 使用作用域插槽 插槽 1. 插槽 插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。 可以把插槽认为是组件封装期间，为用户预留的内容的占位符。 2
【Vue插槽详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
03-15 2万+
个人对Vue中插槽的见解，详细的介绍了不同种类的插槽方法，以及不同类型的插槽作用
vue插槽之插槽的用法及作用域插槽详解
zxdznyy的博客
01-31 1万+
插槽是vue中一个很有用的工具。本篇文章将讲解vue插槽的基本用法，并详细讲解作用域插槽。希望能对读者有所帮助！
Vue slot 插槽
Kofe_Chen的博客
12-01 250
为了让组件可以组合，需要一种方式来 混合父组件的内容与子组件自己的模板。—> 内容分发 Vue 实现了一个内容分发 API，用特殊的 slot 元素作为原始内容的插槽。 编译的作用域 在深入内容分发 API 之前，需要先明确各个内容在哪个作用域内编译 <div id="app"> <child-component v-show="childshow"></c...
vue slot 插槽
鬼鬼的博客
09-18 94
普通插槽 解决 使用组建的时候 组件标签内部的内容会被自己按模板完全替代的问题 比如 页面显示顺序 在组件模板里面添加内容 <script src="../../../vue.js"></script> <script type="text/html" id="guigui"> <div> <h1>组件标题</h1> <footer>组件尾部</footer> <slot&gt
详解vue slot插槽的使用方法
08-30
Vue 中的 Slot 插槽使用方法详解 Vue 中的插槽（Slot）是一种强大的功能，它允许开发者在组件中插入任意的内容，从而提高组件的灵活性和可重用性。下面，我们将详细介绍 Vue 中的插槽使用方法。 1. 单个 Slot ...
vue slot插槽.rar
07-19
本资料"vue slot插槽.rar"显然是针对Vue组件中的slot功能进行深入讲解的。 **一、什么是Vue Slot** Vue Slot是Vue组件系统中的一个特性，它允许我们将组件外部的内容插入到组件内部的特定位置。这就好比是组件内部...
详解Vue slot插槽.rar_javascript
09-23
详解Vue slot插槽,作用域插槽也可以有名字name
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
Vue——插槽
weixin_43599321的博客
03-28 2220
插槽的作用：Vue插槽是Vue中常见的一种组件间的相互通信方式，作用是让父组件可以向子组件指定位置插入html结构，适用于，在要接收数据的组件页面通过标签来表示，简单来说，。插槽的基本使用：这里我们选定App.vue作为父组件，Card.vue作为子组件，作为演示插槽基本使用的代码文件。App.vue运行结果：从上面的运行结果可以看到，插槽的基本使用是子组件自身内容正常显示，插入的内容是父组件向子组件插入的内容，并且插入的内容可以显示多条，如果没有插入内容，将显示
vue基础扩展——插槽
weixin_52629158的博客
05-24 1392
后面我们做项目用到的组件库比如element-ui,vant-ui都频繁用到的插槽，Vue的插槽主要有匿名插槽，具名插槽，作用域插槽三种，下面我们分别来认识一下他们。="uPage" 实现的作用是：双向数据绑定，即：子传父，子组件将数据传递给父组件。插槽插槽实质是对子组件的扩展，通过<slot>插槽-----向组件内部“指定位置” 放置内容。作用域插槽（带数据的插槽）:绑定数据的插槽slot插槽scope作用域。组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力。
【vue】组件中的插槽使用
python全栈
11-08 2720
直接写在组件中的内容，会填充到默认的插槽中（没有用name属性起名字的插槽）在组件中定义插槽的时候，给插槽中预留位置用在接收data中的传过来的数据；其他组件在使用这个组件的时候，可以获得该传递过来的数据。父组件中通过这种形式去子组件中填充内容(固定的)
vue(六)插槽
m0_51371862的博客
10-14 809
1. 什么是插槽 插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽。 2. 插槽的使用 在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。示例代码如下： <template> <p>这是MyCom1组件的p标签</p> <!-- 通过slot标签，为用户预留内容占位符（插槽） --> <slot>.
Vue 2.0中slot的常见用法
越陌度阡
05-26 1万+
Vue中的Slot对于编写可复用可扩展的组件是再合适不过了，常见的用法有以下3种： 1. 插入一个匿名的Slot，匿名的情况只适用于只插入一个的时候； 2. 插入有名的Slot，当插入的Slot有多个的时候，需要按名占位； 3. 在Slot的内部可以将值通过有名Slot传递出去，让外层组件接收； 以下是代码实例： 首先是App.vue，调用了所有组件，插入了所有的有名和匿名的Slot。 <template> <div id="app"> <
Vue-几种插槽(slot)的使用
见证自己学习,成长的记录
06-22 1万+
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
vue系列之插槽（slot）详解
最新发布
胡西风的博客
04-02 1778
插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据 name 来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名。
vue slot插槽
07-28
Vue中的插槽（Slots）是一种在父组件中将子组件的内容进行分发的机制。通过插槽，我们可以在父组件中定义一些占位符，然后在子组件中填充具体的内容。 在Vue中，插槽有两种类型：具名插槽和默认插槽。 具名插槽允许我们在父组件中使用多个不同的插槽，并且可以根据需要进行分发和填充。我们可以使用`<slot>`元素和`name`属性来定义具名插槽。例如： ```html <!-- 父组件 --> <template> <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template> <!-- 子组件 --> <template> <div> <slot name="header"> <!-- 默认插槽内容 --> <h1>默认标题</h1> </slot> <p>子组件内容</p> <slot name="footer"> <!-- 默认插槽内容 --> <p>默认页脚</p> </slot> </div> </template> ``` 在上面的例子中，父组件定义了三个插槽：`header`、默认插槽和`footer`。子组件可以根据需要填充这些插槽，并且如果没有提供相应的内容，那么会显示插槽中的默认内容。 默认插槽是没有名字的插槽，如果在父组件中没有定义具名插槽的话，子组件的内容会被分发到默认插槽中。 除了使用`<slot>`元素和`name`属性来定义插槽，我们还可以使用`<template>`元素和`v-slot`指令来定义和填充插槽。例如： ```html <!-- 父组件 --> <template> <div> <template v-slot:header> <!-- 插槽内容 --> </template> <!-- 默认插槽内容 --> <template v-slot:default> <!-- 插槽内容 --> </template> <template v-slot:footer> <!-- 插槽内容 --> </template> </div> </template> ``` 使用插槽可以使我们的组件更具灵活性，可以根据需要在父组件中定制子组件的部分内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值