详解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 纠正 cleanWhitespace函数
Mar 11 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
vue+canvas实现移动端手写签名
May 21 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中的一些数组排序方法分享
2012/07/20 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php微信公众号开发模式详解
2016/11/28 PHP
php技巧小结【推荐】
2017/01/19 PHP
js 实现浏览历史记录示例
2014/04/20 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python中os.path用法分析
2015/01/15 Python
python中global用法实例分析
2015/04/30 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Django如何自定义分页
2018/09/25 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python 实现单例模式的5种方法
2020/09/23 Python
django使用channels实现通信的示例
2020/10/19 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
项目合作协议书范本
2014/04/16 职场文书
听课评语大全
2014/04/30 职场文书
政风行风建设责任书
2014/07/23 职场文书
2014年教师节活动总结
2014/08/29 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android