【vue笔记整理】Vue slot插槽

最新推荐文章于 2024-01-25 12:38:57 发布
最新推荐文章于 2024-01-25 12:38:57 发布
阅读量116 收藏
点赞数
分类专栏： vue 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangyuan__/article/details/126073993
版权
前端 同时被 2 个专栏收录
49 篇文章 2 订阅
订阅专栏
vue
25 篇文章 0 订阅
订阅专栏
本文深入介绍了Vue.js中的组件插槽，包括默认插槽、具名插槽和作用域插槽的使用方法。通过示例代码展示了如何在父组件中向子组件传递HTML结构，实现组件间的通信，以及如何利用作用域插槽将数据与结构分离，赋予使用者更大的定制灵活性。
摘要由CSDN通过智能技术生成

slot插槽

介绍

插槽：

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 == > 子组件

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    默认插槽：

父组件中：
        <Category>
           	<div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               	<slot>插槽默认内容...</slot>
            </div>
        </template>

​ 具名插槽：

父组件中：
        <Category>
            <template slot="center">
             	 <div>html结构1</div>
            </template>

            <template v-slot:footer>
               	<div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               	<slot name="center">插槽默认内容...</slot>
                <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

作用域插槽：

  1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

  2. 具体编码：

    父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

详细代码

默认插槽

src/App.vue:

<template>
	<div class="container">
		<Category title="美食" >
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

		<Category title="游戏" >
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>

src/components/Category.vue:

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>
具名插槽

给每个插槽分配一个名字，如<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>

src/App.vue:

<template>
	<div class="container">
		<Category title="美食" >
			<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</Category>

		<Category title="游戏" >
			<ul slot="center">
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
			</div>
		</Category>

		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

src/components/Category.vue:

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
        <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>
slot-scope作用域插槽

作用域插槽必须是template开头且结尾,可用于将相同数据用不同格式显示

src/App.vue:

<template>
	<div class="container">
		<Category title="游戏" >
			<template scope="jojo">
				<ul>
					<li v-for="(g,index) in jojo.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category title="游戏" >
			<template scope="jojo">
				<ol>
					<li v-for="(g,index) in jojo.games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>

		<Category title="游戏" >
			<template scope="jojo">
				<h4 v-for="(g,index) in jojo.games" :key="index">{{g}}</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category}
	}
</script>

<style>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

src/components/Category.vue:

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
        data() {
			return {
				games:['植物大战僵尸','红色警戒','空洞骑士','王国']
			}
		},
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>
fangyuan__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue系列之 插槽(Slot) 详解
共同学习，共同成长
05-28 4191
插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式。一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明。
【Vue学习笔记_11】slot插槽
weixin_44752429的博客
11-27 275
【Vue学习笔记_11】slot插槽插槽的基本使用具名插槽作用域插槽 插槽（slot）：预留空间，让封装的组件更具扩展性，让使用者可以根据需求决定组件内部的一些地方展示什么。 配套可执行代码示例 => GitHub 插槽的基本使用 应用场景：导航栏。几乎每个页面都有导航栏，但它们之间又有所区别。 最好的封装方式：将共性抽取到组件中，将不同暴露为插槽。 基本使用：子组件中使用<slot>标签定义插槽，可以指定默认元素。接着父组件在使用子组件时传入替换元素，如果没有传则显示默认元素，如果传入了
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2129
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
前端基础学习——Vue框架-AJAX的使用
weixin_53919192的博客
07-14 6155
本文为大家介绍了前端基础学习——Vue框架-AJAX的使用，希望对你有帮助~~
Vue——Ajax介绍以及案例和Axios使用
测试
03-22 3293
在客户端向服务器发送请求之后，直到服务器处理后逻辑产生响应之后客户端才能执行其他操作。比如在搜索框内输入一个网站的网址访问后，只有整个html页面加载出来了，但是点击任何一个地方都没法跳转，只有整个页面完全加载完成，在服务器端响应完成之后，在网页上的操作才会有反应。
Vue进阶：Vue中的ajax请求
最新发布
做一只猫的博客
01-25 2737
理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（games数据在Category（子）组件中，但使用数据所遍历出来的结构由App（父）组件决定）在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。为什么在Actions 中给的是 context(上下文)，明明只需要进行commit操作，为啥不直接给一个commit就可以了。一、Vue中的ajax请求。
Vue中使用ajax技术
m0_62475892的博客
04-10 3875
Vue自学笔记
Vue笔记七：slot插槽
weixin_45844109的博客
06-17 125
Vue插槽
vue学习笔记之slot插槽用法实例分析
10-15
Vue.js 是一个流行的前端框架，它提供了一种强大的机制来实现组件间的动态内容插入，这就是所谓的`slot插槽`。在Vue中，插槽允许父组件向子组件传递内容，并在子组件模板的特定位置进行渲染。让我们深入探讨一下`...
vue中的 $slot 获取插槽的节点实例
10-16
在Vue.js中，插槽（slot）是一个非常重要的概念，允许开发者在父组件中控制子组件的某些区域，从而实现更加灵活的组件复用。Vue 2.6.0 引入了作用域插槽（scoped slots），使得插槽可以使用子组件的数据。在Vue ...
详解vue slot插槽的使用方法
08-30
Vue 中的 Slot 插槽使用方法详解 Vue 中的插槽（Slot）是一种强大的功能，它允许开发者在组件中插入任意的内容，从而提高组件的灵活性和可重用性。下面，我们将详细介绍 Vue 中的插槽使用方法。 1. 单个 Slot ...
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
vue与Ajax
Yjh_pythonking的博客
08-29 3603
1.VUE 以前说过了vue的安装配置以及基本结构，今天来说一下它的基本操作 1.1 MVVM思想 首先要说的就是它的一个重要思想MVVM的思想 M: model 数据层 V: view 视图层 VM: 视图数据的控制层 流程: 1. Model变化, 虚拟DOM操作内存数据变化. 所以页面变化. 2. View变化, 虚拟DOM操作内存数据变化, 数据变化. 1.2 var/let/const var 没有作用域的概念 容易出现安全性问题. 成员变量 let 作用于var类似, 有作.
【Vue】学习笔记-Vue中的Ajax配置代理
德仔
05-27 1273
vue.config.js 是一个可选的配置文件，如果项目的(和package.json同级的)根目录中存在这个文件，那么它会被@vue/cli-service 自动加载。当我们向服务器请求学生信息的时候，我们不直接请求服务器，而是找代理服务器，代理服务器收到了我们本次请求之后，他会帮我们把请求转发给服务器。​​同时服务器也会把数据交给本地浏览器​​​。也就是说代理服务器是想要服务器上的​​/api1/students​​​数据，但我们的本意是要​​/students​​的数据。
学习笔记之Vue中的Ajax（四）
YING—country的博客
02-26 1769
学习Vue中的Ajax
Vue Ajax请求
XWenXiang的博客
06-28 4350
前端发送 Ajax
[102-104]_Vue插槽
述安的博客
12-03 592
Vue插槽（默认插槽、具名插槽、作用域插槽）
系统性学习vue-vue中的ajax
qq_39685400的博客
01-12 1445
public目录下的内容会被代理服务器纳为己用，而当我们的请求代理服务器可以自己回答时，就不会再将请求转发给后端（是不是挡板？让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。： 插槽内容的样式可以写在子组件里，也可以写在使用者上。同源策略是规定了三个东西必须一致：协议名，主机名，端口号。而请求中的地址也要改为代理服务器地址，但要带着请求信息。需要加个配置，将转发的请求按规则重写。目前不常使用了，因为不咋维护了。请求是成功的 但是请求资源是。
Vue中的Ajax
qq_56444564的博客
05-22 1217
vue脚手架配置代理服务器：方法一：在中添加如下配置： 说明： 方法二： 说明：下载一下所需要的课件资料： vue脚手架配置代理服务器方法一：启动server1,server2App.vue vue.config.js 运行结果：什么是跨域问题？如何解决跨域问题？ vue脚手架配置代理服务器方法二：启动server1,server2App.vue vue.config.js main.js 运行结果：2.GitHub用户搜索案例App.vue main.js Lis
Vue插槽(v-slot)详解：动态、具名与默认插槽应用
在Vue中，插槽主要分为三种类型：普通插槽、具名插槽和默认插槽。 1. **插槽指令（v-slot）**: - **v-slot:插槽名称**: 这是一种用于定义和引用插槽的方式，父组件通过`v-slot`指令将特定的模板片段绑定到特定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值