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 会进行自动 ...
随机推荐
- 5分钟搞清楚Synchronized和Lock的概念与区别
前言 并发编程中,锁是经常需要用到的,今天我们一起来看下Java中的锁机制:synchronized和lock. Synchronized 和 Lock的概念 Synchronized 是Java 并 ...
- Unity中文API参考手册
转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6835582.html Unity5中文脚本手册 网页版 Unity API 执行顺序: Unity5中 ...
- Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
- 用函数式编程，从0开发3D引擎和编辑器（二）：函数式编程准备
大家好,本文介绍了本系列涉及到的函数式编程的主要知识点,为正式开发做好了准备. 函数式编程的优点 1.粒度小 相比面向对象编程以类为单位,函数式编程以函数为单位,粒度更小. 正所谓: 我只想要一个香蕉 ...
- HttpRunner学习4--使用正则表达式提取数据
前言 在HttpRunner中,我们可通过extract提取数据,当响应结果为 JSON 结构,可使用 content 结合 . 运算符的方式,如 content.code,用起来十分方便,但如果响应 ...
- python安装pymssql等包时出现microsoft visual c++ 14.0 is required问题无需下载visualcppbuildtools的解决办法
如题,在练习python安装一些包时,出现了microsoft visual c++ 14.0 is required问题.网上有很多资料:一是下载对应的.whl文件,然后pip install安装: ...
- Winform中实现拖拽文件到ListView获取文件类型(附代码下载)
场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建一个for ...
- EXT grid单元格点击时判断当前行是否可编辑
var c_gridColumns = new Ext.grid.ColumnModel({ columns: [//列模式 c_sm, { header: "内码", dataI ...
- SpringBoot Restful Crud
一个简单的Restful Crud实验 默认首页的访问设置: // 注册 自定义的mvc组件,所有的WebMvcConfigurer组件都会一起起作用 @Bean public WebMvcConfi ...
- Django-如何写好一个celery定时任务
1.首先在项目同名目录下建一个celery.py from __future__ import absolute_import import os from celery import Celery ...