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 会进行自动 ...
随机推荐
- 北京国际机场T3行李运维平台开发记录
说明 该项目是一个后台管理型网站项目,供北京国际机场T3航站楼行李调度运维部门使用,开发时间一个半月,我负责所有的前端开发.后端开发.API接口文档设计与编写.服务部署和交付. 整个网站具备的功能有: ...
- Ubuntu19 安装Theano出现“No module named ‘theano.compat.six’”
解决办法:直接在下载好pythearn2包的目录下,对setup.py文件进行修改:将 from theano.compat.six.moves import input 改为 from six. ...
- Centos6、Centos7防火墙基本操作整理
Centos7: 查看防火墙状态: firewall-cmd --state 开启防火墙: systemctl start firewalld.service 关闭防火墙(重启失效): systemc ...
- Oracle trunc函数的使用
1. 对日期的操作 2. 对数字的操作 1.对日期的操作 /**************日期********************/ SELECT TRUNC(SYSDATE) FROM DUAL; ...
- Java之缓冲流（字节/字符缓冲流）
概述 缓冲流,也叫高效流,是对4个基本的 FileXxx 流的增强,所以也是4个流,按照数据类型分类: 字节缓冲流: BufferedInputStream , BufferedOutputStrea ...
- C++之运算符优先级顺序表
[注] sizeof 的操作数不能是 C 风格转型:表达式 sizeof (int) * p 无歧义地解释成 (sizeof(int)) * p ,而非 sizeof((int)*p). 条件运算符中 ...
- 两种最常用的 HTTP 操作方法是：GET 和 POST。
什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客户机与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用程 ...
- 可编程实验板EPM1270T144C5使用说明
- 如何实现一台服务器同时运行两个php版本
有需要学习交流的友人请加入交流群的咱们一起,有问题一起交流,一起进步!前提是你是学技术的.感谢阅读! 点此加入该群jq.qq.com 假设您已经安装了Apache,为这两个项目创建了虚拟主机,并添加 ...
- XGBoost缺失值引发的问题及其深度分析
1. 背景 XGBoost模型作为机器学习中的一大“杀器”,被广泛应用于数据科学竞赛和工业领域,XGBoost官方也提供了可运行于各种平台和环境的对应代码,如适用于Spark分布式训练的XGBoost ...