详解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 相关文章推荐
javascript针对DOM的应用分析(三)
Apr 15 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
javascript继承机制实例详解
Nov 20 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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判断一个数组是否为有序的方法
2015/03/27 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Python操作json的方法实例分析
2018/12/06 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
python 实现控制鼠标键盘
2020/11/27 Python
python实现经纬度采样的示例代码
2020/12/10 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
产品质量承诺书范文
2014/03/27 职场文书
初中生评语大全
2014/04/24 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP