Vue.js特性Scoped Slots的浅析


Posted in Javascript onFebruary 20, 2019

什么是scoped slots

A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.

上面是官方的定义。

作用域插槽(Scoped Slots)是vue.js中一个非常有用的特性,它可以使组件更加通用和复用。唯一的问题是理解起来比较困难。试图去让你理解父与子作用域的交织关系,像解决一道数学难题。

简单点说slot就是插槽,它是可以被替换掉的,替换它的内容是可以拿到当前组件的上下文的
(为了简单起见,以下例子以模板为主)

举个简单的例子

//button.vue
<template>
 <button class="btn">
  <slot></slot> //相当于是占位
 </button>
</template>

<script>
export default {

}
</script>
//app.vue
<template>
 <div id="app">
 <Button>Buton with text</Button>
 <Button>
 <i class="fa fa-copy"></i>//这里取代了slot的位置
 </Button>

 <Button>
 <i class="fa fa-user"></i>Profile
 </Button>

 </div>
</template>

<script>
 import Button from './components/Button.vue'
 export default {
 name: 'app',
 components: {
 Button
 }
 }
</script>

slot其实就是一个占位,button.vue的slot位置会被app.vue里面的替换了。

复杂例子1:slot内的东西可以获取父组件的上下文信息

//list.vue
<template>
 <div>
 <slot v-for="item in items"
   :item="item">//这里是slot的占位
 </slot> 
 </div>
</template>
//app.vue
<template>
 <div id="app">
 <List :items="listItems">
  <div slot-scope="row"
  class="list-item1">//这里可以获取到item,item原本是属于List组件内部的。也就是说slot获取了父组件的上下文。
  {{row.item.text}}
 </div>
 </List>
 </div>
</template>

解释见上面代码注释。注意一点的是slot-scope=”row” 这里的名字(row)是可以任意取的。

named slots

可以直接放到普通标签上面,可以放template标签上

slot里面的作用域是普通标签或者template是一致的。不能访问父组件的作用域。

复杂例子2:slot里面是可以放东西的,是默认的模板,可被替换。

//table.vue
<template>
 <table class="table">
 <thead>
  <slot name="columns">//这里定义了一个slot,名字叫columns,也就是说这里的内容是可以被替换掉的
  <th v-for="column in columns">
   {{column}}
  </th>
  </slot>
 </thead>
 <tbody>
 <tr v-for="item in data">
  <slot :row="item">//这里slot有一个prop是row
  <td v-for="column in columns"
   v-if="hasValue(item, column)">
   {{itemValue(item, column)}}
  </td>
  </slot>
 </tr>
 </tbody>
 </table>
</template>
//app.vue
<template>
 <div id="app">
 <CustomTable :data="tableData" 
   :columns="tableColumns">
 </CustomTable>

  <div class="table-separator"></div>

 <CustomTable :data="tableData">
  <template slot="columns">//这里有一个slot="columns",意思是替换table.vue里面名字叫columns的slot
  <th>Title</th>
  <th>
  <i class="fa fa-images"></i> Image
  </th>
  <th class="actions-row">
  <i class="fab fa-vuejs vue-icon"></i> Actions
  </th>
 </template>

 <template slot-scope="{row}">//这里替换table.vue里面slot为row的内部内容
 <td class="bold-row">
  {{row.title}}
 </td>
 <td class="img-row">
  <img :src="row.img">
 </td>
 <td class="actions-row">
  <Button @click.native="handleAction('Edit')">
  <i class="fa fa-edit"></i>
  </Button>
  <Button @click.native="handleAction('Delete')" type="danger">
  <i class="fa fa-trash"></i>
  </Button>
 </td>
 </template> 
 </CustomTable>
 </div>
</template>

Vue.js特性Scoped Slots的浅析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 #Javascript
详解关于element级联选择器数据回显问题
Feb 20 #Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 #Javascript
echarts实现词云自定义形状的示例代码
Feb 20 #Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 #Javascript
详解webpack 最简打包结果分析
Feb 20 #Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
You might like
php的sso单点登录实现方法
2015/01/08 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python计算字符宽度的方法
2016/06/14 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Django后台admin的使用详解
2019/07/08 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
实习班主任自我评价
2015/03/11 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL