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 会进行自动 ...
随机推荐
- Java并发编程系列-(6) Java线程池
6. 线程池 6.1 基本概念 在web开发中,服务器需要接受并处理请求,所以会为一个请求来分配一个线程来进行处理.如果每次请求都新创建一个线程的话实现起来非常简便,但是存在一个问题:如果并发的请求数 ...
- 注解slf4j的日志该用哪个级别
slf4j的日志级别分为五种 info.debug.error.warn.trane 常用的是这是三个. info 一般处理业务逻辑的时候使用,就跟 system.err打印一样,用 ...
- java 反射的意义
具体的关于反射的介绍可以参考我的另外一篇博文<深入解析java反射>. 反射的意义是什么,其实就是为了代码简洁,提高代码的复用率,外部调用方便,源代码,反编译都能看到. 某些情况下解耦用反 ...
- 安卓逆向基础(002)-android虚拟机
一, android分两种 1.Android 5.0以下(不含5.0) dalvik字节码 为dalvik虚拟机(jit机制) 基于寄存器架构 .dex=>dexopt=>.odex d ...
- java设计模式（一）动态代理模式，JDK与CGLIB分析
-本想着这个知识点放到Spring Aop说说可能更合适一点,但因为上一篇有所提到就简单分析下,不足之处请多多评论留言,相互学习,有所提高才是关键! 什么是代理模式: 记得有本24种设计模式的书讲到代 ...
- 【高可用架构】开发机上部署Deploy项目（一）
准备 部署项目的细节可以看这个,传送门Centos 7部署Laravel项目 主机IP:192.168.10.17 [高可用架构]系列链接:待部署的架构介绍 演示 部署Deploy composer ...
- k8s~跨namespace的service相互访问
在k8s里,你可以通过服务名去访问相同namespace里的服务,然后服务可以解析到对应的pod,从而再由pod转到对应的容器里,我们可以认为这个过程有两个port的概念,service port 就 ...
- php 弱类型总结
0x01 前言 最近CTF比赛,不止一次的出了php弱类型的题目,借此想总结一下关于php弱类型以及绕过方式 0x02 知识介绍 php中有两种比较的符号 == 与 === <?php $a = ...
- Pikachu-Sql Inject
Pikachu-Sql Inject 在owasp发布的top10排行榜里,注入漏洞一直是危害排名第一的漏洞,其中注入漏洞里面首当其冲的就是数据库注入漏洞. 一个严重的SQL注入漏洞,可能会直接导致一 ...
- flask项目部署到生产环境的方案
背景 使用Python+flask编写的一个小项目,在本地开发完毕后,需要部署到测试服务器上,这时候犯难了,因为之前没部署过这块东西,所以各种百度,总算是部署成功了,也对这个项目进行了jenkins持 ...