Vue.js 作用域、slot用法（单个slot、具名slot）
作用域
在介绍slot前，需要先知道一个概念：编译的作用域。比如父组件中有如下模板：
<child-component>
{{message}}
<child-component>
这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件< child-component >的数据。
父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。
<div id="app">
<child-component v-show="showChild"></child-component>
</div>
<script>
Vue.component('child-component',{
template: '<div>子组件</div>'
}); var app = new Vue({
el: '#app',
data: {
showChild: true
}
});
</script>
这里的状态showChild绑定的是父组件的数据，如果想在子组件上绑定，那应该是：
<div id="app">
<child-component></child-component>
</div>
<script>
Vue.component('child-component',{
template: '<div v-show="showChild">子组件</div>',
data: function () {
showChild: true
}
}); var app = new Vue({
el: '#app'
});
</script>
因此，slot分发的内容，作用域是在父组件上的。
slot用法
单个slot：
在子组件使用特殊的< slot >元素就可以为这个子组件开启一个 slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的< slot >标签及它的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>单个slot</title>
</head>
<body>
<div id="app">
<cild-component>
<p>分发的内容</p>
<p>更多分发的内容</p>
</cild-component>
</div>
<script>
Vue.component('child-component',{
template: '\
<div>\
<slot>\
<p>如果父组件没有插入内容，我将作为默认出现</p>\
</slot>\
</div>'
}); var app = new Vue({
el: '#app'
});
</script>
</body>
</html>
子组件child-component的模板内定义了一个< slot >元素，并且用一个< p >作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，那就会替代整个< slot >标签。
上面示例渲染后的结果为：
<div id="app">
<div>
<p>分发的内容</p>
<p>更多分发的内容</p>
</div>
</div>
注意：子组件< slot >内的为备用内容，它的作用域是子组件本身。
具名slot：
给< slot >元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。
<div id="myApp">
<child-component>
<h2 slot="header">标题</h2>
<p>正文内容</p>
<p>更多的正文内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<script>
Vue.component('child-component',{
template: '\
<div class="container">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>'
}); var myApp = new Vue({
el: '#myApp'
});
</script>
子组件内声明了3个< slot >元素，其中在< div class=“main” > 内的 < slot >没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现在这里。
如果没有制定默认的匿名slot，父组件内多于的内容片断都将被抛弃。
渲染结果：
<div class="container">
<div class="header">
<h2>标题</h2>
</div>
<div class="main">
<p>正文内容</p>
<p>更多的正文内容</p>
</div>
<div class="footer">
<div slot="footer">底部信息</div>
</div>
</div>
文章同步发布： https://www.geek-share.com/detail/2783995082.html
参考文章：
Vue.js 作用域、slot用法（单个slot、具名slot）的更多相关文章
- vue.js之数据传递和数据分发slot
一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...
- vue.js 常用指令用法
v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素. 如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除: 否则,对应元素的一个克隆将被重新插入DOM中,代码如 ...
- vue.js 中slot 用处大（转载）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- 关于vue.js中slot的理解
slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子: <script src="https://unpkg.com/vue/dist/ ...
- vue组件详解（四）——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- vue.js 精学组件记录
组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...
- Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- vue.js学习之组件（下篇）
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
随机推荐
- 第六章 XaaS和IT服务标准
从云计算(Cloud Computing)谈起 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问,进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这 ...
- 有关RootViewController设置的问题和Unbalanced calls to begin/end appearance transitions for <CYLTabbarController>
问题 今天做项目时遇到了一个问题,我想做一个登陆页面,在用户输入了登录名和密码后跳转到app主界面,最开始用的是在方法中新建一个appdelegate对象,再将其中的window属性设置Tabbar为 ...
- Idea项目上传到gitlab（以新建项目为例）
1.首先,需要你自己登录GitLab,并新建一个项目的链接,如下图所示: 图一: 图二: 图三(idea上传时用到此链接): 2.在idea上新建一个demo项目,创建一个Git仓库: 3.点击创建后 ...
- 【greys使用】阿里greys在线诊断工具
Greys是一个Java进程的异常诊断工具,可以在不停止程序的前提下,对一些问题进行检测.这个框架主要是采用Java的探针技术,可以做到动态修改java的字节码技术.前提是Jdk版本6+.(prema ...
- CVPR2020论文介绍： 3D 目标检测高效算法
CVPR2020论文介绍: 3D 目标检测高效算法 CVPR 2020: Structure Aware Single-Stage 3D Object Detection from Point Clo ...
- 深度人脸识别：CVPR2020论文要点
深度人脸识别:CVPR2020论文要点 Towards Universal Representation Learning for Deep Face Recognition 论文链接:https:/ ...
- MindSpore模型精度调优实践
MindSpore模型精度调优实践 引论:在模型的开发过程中,精度达不到预期常常让人头疼.为了帮助用户解决模型调试调优的问题,为MindSpore量身定做了可视化调试调优组件:MindInsight. ...
- 利用MONAI加速医学影像学的深度学习研究
利用MONAI加速医学影像学的深度学习研究 Accelerating Deep Learning Research in Medical Imaging Using MONAI 医学开放式人工智能网络 ...
- 自然语言推理：微调BERT
自然语言推理:微调BERT Natural Language Inference: Fine-Tuning BERT SNLI数据集上的自然语言推理任务设计了一个基于注意力的体系结构.现在通过微调BE ...
- IaaS、PaaS 和 SaaS：云服务模型概述
IaaS.PaaS 和 SaaS:云服务模型概述 为您的组织选择合适的云服务模型,可以帮助您充分利用预算和 IT 资源. 基础设施即服务 (IaaS).平台即服务 (PaaS) 以及软件即服务 (Sa ...