详解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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
Element-ui upload上传文件限制的解决方法
Jan 22 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
Python中decorator使用实例
2015/04/14 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python中判断文件结束符的具体方法
2020/08/04 Python
python实现图片素描效果
2020/09/26 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
酒店应聘自荐信
2013/11/09 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
优秀员工事迹材料
2014/12/20 职场文书
个人原因辞职信模板
2015/05/13 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
python基础之停用词过滤详解
2021/04/21 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸