程序员都必掌握的前端教程之VUE基础教程(九)
qiyuwang 2024-10-06 12:17 10 浏览 0 评论
阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的插槽等相关知识点。下面我们就一起来学习该块内容吧！
01 简介
插槽就是子组件中的提供给父组件使用的一个占位标识符，用<slot></slot> 表示（），父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，下面我们来看看具体示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--调用子组件-->
<Child>
<p style="color: red">插槽示例(本内容将会渲染至子组件slot位置处)</p>
</Child>
</div>
<script>
// 定义一个子组件Child，同时在其html内部增加<slot></slot>进行占位
var Child = {
data: function () {
return {
}
},
/*父组件在调用子组件时会把其在子组件标签的内容渲染进slot占位处*/
template: '<h4>我是子组件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
},
})
</script>
</body>
</html>
这时肯定有人疑惑如果我子组件中没有slot标签然后再父组件中调用子组件时也在期内写上内容会不会被渲染了，我们来看一下演示：现在可以得出一个结论如果子组件中没有<slot></slot>标签，则父组件调用子组件时内插入的所有内容都会被丢弃，不会被渲染出来
02 编译作用域
如上面的列子中如果我们想在插槽中使用数据时,会发现插槽中的数据是由父组件的data控制的而不是子组件进行控制，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--由于编译作用域所以这边的v-show与msg其实都是父组件传递的值,因为这些内容都是父组件编译的-->
<Child v-show="isShow">
<p style="color: red">插槽编译作用域示例： {{msg}}</p>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子组件msg的值"
}
},
// 子组件定义的msg变量值不会渲染到插槽内
template: '<h4>我是子组件<slot></slot></h4>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
isShow: true,
msg: "我是父组件msg的值"
},
})
</script>
</body>
</html> 编译作用域其实就是一条规则就是，父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
03 插槽默认值（后备内容）
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中
<button type="submit">
<slot></slot>
</button> 我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：
<button type="submit">
<slot>Submit</slot>
</button> 现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：
<submit-button></submit-button> 后备内容“Submit”将会被渲染：
<button type="submit">
Submit
</button> 但是如果我们提供内容：
<submit-button>
Save
</submit-button> 则这个提供的内容将会被渲染从而取代后备内容：
<button type="submit">
Save
</button> 04 具名插槽
具名插槽就是给插槽指定名称我们在使用时通过名称来指定其渲染的位置，具体示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--具名插槽示例-->
<Child>
<!--按照插槽名称进行标签传递渲染，具体渲染顺序是根据子组件中编写插槽的顺序来的-->
<template v-slot:header>
<div>我是header</div>
</template>
<template v-slot:footer>
<div>我是footer</div>
</template>
<!--如果不指定插槽名称标签会被渲染至默认插槽处，也就是没有定义名称的插槽位置-->
<template>
<div>我会被渲染至默认插槽位置</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
msg: "我是子组件msg的值"
}
},
// 定义具名插槽，没有定义名称的slot会有一个默认值为default,在父组件调用时没有指定渲染插槽名称的标签会被渲染至默认插槽位置
template: '<div><h4>我是子组件</h4><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
},
})
</script>
</body>
</html> 05 作用域插槽
作用域插槽就是让父组件的插槽内容插能够访问子组件中才有的数据，具体使用示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--作用域插槽示例-->
<Child>
<!--这边v-slot后面其实省略了default名称详细写法v-slot:default="slotProps"-->
<template v-slot="slotProps">
<!--通过slotProps获取子组件中给slot v-bind的值，然后进行遍历读取-->
<div v-for="item in slotProps.user">姓名: {{ item.name }} 得分: {{ item.score }}</div>
</template>
</Child>
</div>
<script>
var Child = {
data: function () {
return {
userList: [
{"name": "小明", "score": "90"},
{"name": "小红", "score": "95"},
{"name": "小强", "score": "96"}
]
}
},
// 定义作用域插槽，给slot v-bind了一个userList的值
template: '<div><h4>作用域插槽示例</h4><slot :user="userList"></slot></div>',
}
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
// 在 components 选项中定义你想要使用的组件
components: {
"Child": Child,
},
data: { // 数据对象
},
})
</script>
</body>
</html> 06 总结
至此我们VUE基础教程就就讲完了，主要讲解了VUE的基础用法，其实VUE还有一些进阶知识如vue-router（前端路由）、vuex（数据状态管理）等内容，但这些内容主要用在项目构建上，成哥在下面AntDesign vue教程中会进行穿插讲解，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
相关阅读：
相关推荐
- 别再乱找了!这才是 Alist 本地安装挂载的正确打开方式
-
一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平...
- 如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!
-
前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试...
- 大数据传输的定义与大数据传输解决方案的选择
-
当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大...
- 【工具】在线传输文件工具（在线文件互传）
-
前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...
- 如何使用 CAN-FD 在 LPC5500 上传输数据
-
目录1引言2CAN-FD3示例演示1引言...
- 轻松同步:将照片从三星手机传输到iPad的简便方法
-
概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之...
- 常见又地道的网络缩写:美剧中常说的SFW到底是个啥?
-
在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy...
- 每天学会一个计算机网络协议之FTP
-
开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf...
- 即用即走，这3款文件分享工具真香
-
打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。...
- 安卓手机里的文件和照片与Mac互传的办法
-
因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的...
- 软网推荐:同一个平台选择不同的传输方法
-
平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有...
- 跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）
-
大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百...
- 全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)
-
前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，...
- 文件传输工具有哪些?这3款堪称办公必备!
-
在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷...
- 小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具
-
跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)