详解Vue.js 作用域、slot用法(单个slot、具名slot)


Posted in Javascript onOctober 15, 2019

作用域

在介绍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>

总结

以上所述是小编给大家介绍的Vue.js 作用域、slot用法(单个slot、具名slot),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
js实现楼层导航功能
Feb 23 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 #Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 #Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 #Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 #Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 #Javascript
js实现开关灯效果
Mar 30 #Javascript
JS实现灯泡开关特效
Mar 30 #Javascript
You might like
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
使用JS动态显示文本
2017/09/09 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
大学校务公开实施方案
2014/03/31 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书