了解一下Vue中的插槽

青灯夜游

发布时间：2020-10-14 17:41:45

2557人浏览过

来源于博客园

转载

了解一下Vue中的插槽

Vue插槽，是学习vue中必不可少的一节，当初刚接触vue的时候，对这些掌握的一知半解，特别是作用域插槽一直没明白。

后面越来越发现插槽的好用。

分享一下插槽的一些知识吧。

一、插槽内容

立即学习“前端免费学习笔记（深入）”；

一句话：插槽内可以是任意内容。

先看一下下面的代码：声明一个child-component组件，

如果现在我想在内放置一些内容，结果会是怎样？

你好

输出内容还是在组件中的内容，在内写的内容没起作用。

我们现在给组件增加一个插槽

我们在内写的"你好"起作用了！！！

Vue.component('child-component',{
        template:`
            
            Hello,World!
            
            
        `
    })

到现在，我们知道了什么是插槽：

插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。

这句话的意思就是，没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！

二、具名插槽

mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提

下载

具名插槽，就是给这个插槽起个名字

在组件中，我给插槽起个名字，一个名字叫"girl"，一个名字叫"boy"，还有一个不起名字。

然后再内，slot属性对应的内容都会和组件中name一一对应。

而没有名字的，就是默认插槽！！

3、作用域插槽

之前一直没搞懂作用域插槽到底是什么！！！

说白了就是我在组件上的属性，可以在组件元素内使用！

先看一个最简单的例子！！

我们给元素上定义一个属性say（随便定义的！），接下来在使用组件child，然后在template元素上添加属性slot-scope！！随便起个名字a

我们把a打印一下发现是 {"say" : "你好"}，也就是slot上面的属性和值组成的键值对！！！

这就是作用域插槽！

我可以把组件上的属性/值，在组件元素上使用！！

再看一下下面的例子：

看一下输出结果

相关推荐：2020年前端vue面试题大汇总（附答案）vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

Vue.js实现音乐播放器的代码示例

Vue的v-bind和v-on的语法糖分别是什么？

学习Vue.js的最佳实践博客有哪些

Vue的异步更新队列是如何工作的？

Vue事件处理如何绑定？@click和v-on有什么区别？

相关标签:

vue vue.js JS 作用域

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：详解Vue中的无渲染行为插槽下一篇：Vue.js 学习之四：Vue 组件基础

作者最新文章

探讨如何在Vue3中编写单元测试

2023-04-25 19:41

深入了解Node中的Buffer

2023-04-25 19:49

一文理解JavaScript中的单例模式

2023-04-25 19:53

如何解决跨域？常见解决方案浅析

2023-04-25 19:57

实用Word技巧分享：简繁转换功能竟然可以这样用！

2023-04-26 17:27

实用Excel技巧分享：4种删除重复值的小妙招！

2023-04-26 17:31

一文聊聊Node中的内存控制

2023-04-26 17:37

一文讨论Vue2中key和Vue3中key的区别

2023-04-26 17:41

【整理分享】7个热门的React状态管理工具

2023-04-26 17:47

深入搞懂Redis中的哨兵

2023-04-26 17:59

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

vue.js为什么报错

vue.js报错的原因：1、语法错误；2、组件使用不当；3、数据绑定问题；4、生命周期钩子使用不当；5、插件或依赖问题；6、路由配置错误；7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

117

2024.03.11

vue.js插槽有哪些用

vue.js插槽的作用：1、提高组件的可重用性；2、实现组件的灵活布局；3、实现组件间的数据传递和交互；4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

152

2024.03.11

vue.js怎么带参数跳转

vue.js带参数跳转的方法：1、定义路由；2、在组件中使用路由参数；3、进行带参数的跳转。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2024.03.11

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

505

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

240

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

246

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5202

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

470

2023.09.01