Vue 从入门到进阶之路（十一）
之前的文章我们说了一下 vue 中组件的原生事件绑定，本章我们来所以下 vue 中的插槽使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child title="<p>你好 世界</p>"></child>
</div>
<script>
Vue.component("child", {
props: ['title'],
template: `
<div>
{{title}}
<p>hello world</p>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
上面的代码中，我们通过 title="" 形式通过父组件向子组件 child 传递了一个 "<p>你好世界</p>" 的带标签的内容，然后我们在子组件中输出，结果如下：
显示结果是按字符串展示的，但我们想要的是不带标签的输出结果，在之前的文章中我们说过可以通过 v-html 来进行转义，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child title="<p>你好 世界</p>"></child>
</div>
<script>
Vue.component("child", {
props: ['title'],
template: `
<div>
<div v-html="title"></div>
<p>hello world</p>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
我们把 template 中的 {{title}} 改成了 v-html 的形式输出，结果如下：
输出结果没问题，但是当我们看控制台的 HTML 代码时发现外层多加了一个 <div> 标签，这显然不友好，，这时可能有人会想到模板标签 <template v-html="title"> 这样写，但是这样的话在页面上是不会输出内容的。而且如果 <child> 标签内的 title 属性里面的内容并不只是一个 <p> 标签，还有很多其他的内容，例如 "<p>你好 世界<p><p>你好 世界<p><p>你好 世界<p><p>你好 世界<p><p>你好 世界<p><p>你好 世界<p>" 这么长的内容，在代码里也不好看。
如何解决上面的问题，Vue 官方为我们提供插槽 slot，我们可以将代码改成如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child>
<p>你好 世界</p>
</child>
</div>
<script>
Vue.component("child", {
template: `
<div>
<slot></slot>
<p>hello world</p>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
我们将 p 标签想要输出的内容直接放在了 <child> 标签内，然后在 template 中添加标签 <slot>，意思就是将 <child> 内的内容通过 slot 插槽插入子组件，结果如下：
完美解决了我们的问题，而且 <slot> 标签内还可以自定义我们想要输出的内容，如果 <child> 标签内没有内容的话以自定义的内容输出，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child></child>
</div>
<script>
Vue.component("child", {
template: `
<div>
<slot>插槽自定义内容</slot>
<p>hello world</p>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
我们在 <child> 标签内没有内容，在 slot 标签内插入了一些内容，在页面显示如下：
上面的 "插槽自定义内容" 在 <child> 内没有内容时输出，如果有内容则输出 <child> 标签内的内容。
上面的插槽形式我们可以称之为无名插槽，还有一种插槽叫具名插槽，看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child>
<header>我是 header</header>
<footer>我是 footer</footer>
</child>
</div>
<script>
Vue.component("child", {
template: `
<div>
<slot></slot>
<p>hello world</p>
<slot></slot>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
我们想要一种效果，就是自定义插槽的内容位置，假设上的代码中 <header> 标签内的内容为头部信息，<footer> 标签内的内容为底部信息，我们想让它们分别输出在 template 模板中 p 标签的上下，结果如下：
输出内容显然不是我们想要的结果，我们每用一次 <slot> 标签就会在页面输出一次，那该如何解决这个问题呢，我们可以使用具名插槽来为我们的插槽定义名称，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child>
<header slot="header">我是 header</header>
<footer slot="footer">我是 footer</footer>
</child>
</div>
<script>
Vue.component("child", {
template: `
<div>
<slot name="header"></slot>
<p>hello world</p>
<slot name="footer"></slot>
</div>
`
});
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
在上面的代码中，我们分别为 <header> <footer> 标签添加 slot 属性，然后在 template 中的 <slot> 标签内以 name 属性来分别对应标签 <header> <footer> 内的 slot 属性值，这样就将指定的内容输出，结果如下：
完美解决我们的问题。
Vue 从入门到进阶之路（十一）的更多相关文章
- Vue 从入门到进阶之路（十四）
之前的文章我们对 vue 的基础用法已经有了很直观的认识,本章我们来看一下 vue 中的生命周期函数. 上图为 Vue官方为我们提供的完整的生命周期函数的流程图,下面的案例我们只是走了部分情况流程,但 ...
- Vue 从入门到进阶之路（十三）
之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...
- Vue 从入门到进阶之路（十二）
之前的文章我们介绍了一下 vue 中插槽的使用,本章我们接着介绍一下 vue 中的作用域插槽. <!DOCTYPE html> <html lang="en"&g ...
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Python 爬虫从入门到进阶之路（十一）
之前的文章我们介绍了一下 Xpath 模块,接下来我们就利用 Xpath 模块爬取<糗事百科>的糗事. 之前我们已经利用 re 模块爬取过一次糗百,我们只需要在其基础上做一些修改就可以了, ...
- Java 从入门到进阶之路（十一）
之前的文章我们介绍了一下 Java 中的继承,接下来我们继续看一下 Java 中的继承. 在有些时候,我们通过类继承的方式可以获取父类的方法,但是有些时候父类为我们提供的方法并不完全符合我们的需求,这 ...
- Java 从入门到进阶之路（二十一）
在之前的文章我们介绍了一下 Java 中的日期操作,本章我们来看一下 Java 集合框架中的Collection. 早在 Java 2 中之前,Java 就提供了特设类.比如:Dictionary, ...
- vue从入门到进阶：vue-router路由功能（九）
基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...
- vue从入门到进阶：Vuex状态管理（十）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
随机推荐
- Vue ---- vue的基本使用 文本/事件/属性指令 补充: js面向对象 js函数
目录 日考题(知识点)
- 1、采用SD启动盘bootingLinux
一.准备条件 1.Arrow Sockit 开发板: 2.主机:可以是Linux系统,也可以是windows系统: 3.可以让主机识别的SD卡,不管是用读卡器还是用主机上的卡槽,内存4G以上 二.创建 ...
- Spring Cloud Alibaba 新一代微服务解决方案
本篇是「跟我学 Spring Cloud Alibaba」系列的第一篇, 每期文章会在公众号「架构进化论」进行首发更新,欢迎关注. 1.Spring Cloud Alibaba 是什么 Spring ...
- Android Studio 中java 文件报错红色J
用常用的方法清除Android Studio的缓存然后重启,"File" -> "Invalidate Cashes / Restart" -> & ...
- Codeforces Global Round 6
久违的写篇博客吧 A. Competitive Programmer 题目链接:https://codeforces.com/contest/1266/problem/A 题意: 给你一个只包含数字 ...
- 牛客NOIP暑期七天营-提高组2
第一题:ACGT 题目链接:https://ac.nowcoder.com/acm/contest/931/A trie树.hash.map遍历 ①.trie树上的节点多记一个rest值表示还有多少 ...
- Windows下mysql-5.7.28下载、安装、配置教程
最近需要更换mysql数据库的版本,写一篇文章,记录一下 一.下载mysql数据库 mysql的下载共有两种,一种是zip压缩文件,另一种是msi安装程序 官方5.7版本zip压缩文件下载页面 官方5 ...
- 扫描枪连接zebra打印机打印条码标签无需电脑
在一些流水线生产的现场,需要及时打印条码标签,由于现场环境和空间限制,无法摆放电脑或者通过连接电脑来打印条码标签的速度太慢, 瑞科条码特提供了一套扫描枪直接连接条码打印机,扫描枪扫描条码之后直接打印输 ...
- Linux 命令行初始化MySQL数据库
作为一个技术纯小白,在Linux服务器初始化MySQL数据库的时候遇到了一点小问题: 1.不会使用MySQL图形工具,几乎没玩过 2.客户的VPN没有开放3306端口,没法用navicat等工 ...
- Ubuntu18.04搭建测试环境
前言 说一下我的情况,之前由于我的云服务器数据库的root账号密码123456太简单,而在之前的博客中也泄露出了我的云服务器的IP地址,导致有人远程连接我的数据库,删除了项目数据库里的数据只剩下WAR ...