深入理解vue中slot与slot-scope的具体使用


Posted in Javascript onJanuary 26, 2018

写在前面

vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。

实际上,插槽的概念很简单,下面通过分三部分来讲。这个部分也是按照vue说明文档的顺序来写的。

进入三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示。

由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。

非插槽模板指的是html模板,指的是‘div、span、ul、table'这些,非插槽模板的显示与隐藏以及怎样显示由插件自身控制;插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。

单个插槽 | 默认插槽 | 匿名插槽

首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。

单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了。

下面通过一个例子来展示。

父组件:

<template>
 <div class="father">
  <h3>这里是父组件</h3>
  <child>
   <div class="tmpl">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
    <span>菜单5</span>
    <span>菜单6</span>
   </div>
  </child>
 </div>
</template>

子组件:

<template>
 <div class="child">
  <h3>这里是子组件</h3>
  <slot></slot>
 </div>
</template>

在这个例子里,因为父组件在<child></child>里面写了html模板,那么子组件的匿名插槽这块模板就是下面这样。也就是说,子组件的匿名插槽被使用了,是被下面这块模板使用了。

<div class="tmpl">
 <span>菜单1</span>
 <span>菜单2</span>
 <span>菜单3</span>
 <span>菜单4</span>
 <span>菜单5</span>
 <span>菜单6</span>
</div>

最终的渲染结果如图所示:

深入理解vue中slot与slot-scope的具体使用

注:所有demo都加了样式,以方便观察。其中,父组件以灰色背景填充,子组件都以浅蓝色填充。

具名插槽

匿名插槽没有name属性,所以是匿名插槽,那么,插槽加了name属性,就变成了具名插槽。具名插槽可以在一个组件中出现N次。出现在不同的位置。下面的例子,就是一个有两个具名插槽和单个插槽的组件,这三个插槽被父组件用同一套css样式显示了出来,不同的是内容上略有区别。

父组件:

<template>
 <div class="father">
 <h3>这里是父组件</h3>
 <child>
  <div class="tmpl" slot="up">
  <span>菜单1</span>
  <span>菜单2</span>
  <span>菜单3</span>
  <span>菜单4</span>
  <span>菜单5</span>
  <span>菜单6</span>
  </div>
  <div class="tmpl" slot="down">
  <span>菜单-1</span>
  <span>菜单-2</span>
  <span>菜单-3</span>
  <span>菜单-4</span>
  <span>菜单-5</span>
  <span>菜单-6</span>
  </div>
  <div class="tmpl">
  <span>菜单->1</span>
  <span>菜单->2</span>
  <span>菜单->3</span>
  <span>菜单->4</span>
  <span>菜单->5</span>
  <span>菜单->6</span>
  </div>
 </child>
 </div>
</template>

子组件:

<template>
 <div class="child">
 // 具名插槽
 <slot name="up"></slot>
 <h3>这里是子组件</h3>
 // 具名插槽
 <slot name="down"></slot>
 // 匿名插槽
 <slot></slot>
 </div>
</template>

显示结果如图:

深入理解vue中slot与slot-scope的具体使用

可以看到,父组件通过html模板上的slot属性关联具名插槽。没有slot属性的html模板默认关联匿名插槽。

作用域插槽 | 带数据的插槽

最后,就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽,实际上,对比前面两种插槽,我们可以叫它带数据的插槽。什么意思呢,就是前面两种,都是在组件的template里面写

匿名插槽

<slot></slot>

具名插槽

<slot name="up"></slot>

但是作用域插槽要求,在slot上面绑定数据。也就是你得写成大概下面这个样子。

<slot name="up" :data="data"></slot>
 export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 },
}

我们前面说了,插槽最后显示不显示是看父组件有没有在child下面写模板,像下面那样。

<child>
 html模板
</child>

写了,插槽就总得在浏览器上显示点东西,东西就是html该有的模样,没写,插槽就是空壳子,啥都没有。
OK,我们说有html模板的情况,就是父组件会往子组件插模板的情况,那到底插一套什么样的样式呢,这由父组件的html+css共同决定,但是这套样式里面的内容呢?

正因为作用域插槽绑定了一套数据,父组件可以拿来用。于是,情况就变成了这样:样式父组件说了算,但内容可以显示子组件插槽绑定的。

我们再来对比,作用域插槽和单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件是提供的模板要既包括样式由包括内容的,上面的例子中,你看到的文字,“菜单1”,“菜单2”都是父组件自己提供的内容;而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。

下面的例子,你就能看到,父组件提供了三种样式(分别是flex、ul、直接显示),都没有提供数据,数据使用的都是子组件插槽自己绑定的那个人名数组。

父组件:

<template>
 <div class="father">
 <h3>这里是父组件</h3>
 <!--第一次使用:用flex展示数据-->
 <child>
  <template slot-scope="user">
  <div class="tmpl">
   <span v-for="item in user.data">{{item}}</span>
  </div>
  </template>

 </child>

 <!--第二次使用:用列表展示数据-->
 <child>
  <template slot-scope="user">
  <ul>
   <li v-for="item in user.data">{{item}}</li>
  </ul>
  </template>

 </child>

 <!--第三次使用:直接显示数据-->
 <child>
  <template slot-scope="user">
  {{user.data}}
  </template>

 </child>

 <!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
 <child>
  我就是模板
 </child>
 </div>
</template>

子组件:

<template>
 <div class="child">

 <h3>这里是子组件</h3>
 // 作用域插槽
 <slot :data="data"></slot>
 </div>
</template>

 export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 }
}

结果如图所示:

深入理解vue中slot与slot-scope的具体使用

github

以上三个demo就放在GitHub了,有需要的可以去取。使用非常方便,是基于vue-cli搭建工程。

地址点这里

最后

希望本文所述对你有所帮助,vue中slot与slot-scope的具体使用就给大家介绍到这里了。希望大家继续关注我们的网站!

Javascript 相关文章推荐
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 #Javascript
微信小程序模版渲染详解
Jan 26 #Javascript
微信小程序如何获取用户信息
Jan 26 #Javascript
vue实现前进刷新后退不刷新效果
Jan 26 #Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 #Javascript
微信小程序实现图片压缩功能
Jan 26 #Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 #Javascript
You might like
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
sails框架的学习指南
2014/12/22 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
TypeScript入门-接口
2017/03/30 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
Python实现数据库编程方法详解
2015/06/09 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python中修改字符串的四种方法
2018/11/02 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
护理专业个人求职简历的自我评价
2013/10/13 职场文书
服装厂厂长职责
2013/12/16 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
物业管理专业求职信
2014/06/11 职场文书
运动会广播稿100字
2014/09/14 职场文书
荆州古城导游词
2015/02/06 职场文书
大学生团员个人总结
2015/02/14 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript