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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 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
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
laravel 数据验证规则详解
2019/10/23 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
ant design实现圈选功能
2019/12/17 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python引用DLL文件的方法
2015/05/11 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
学校大课间活动方案
2014/01/30 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
委托书如何写
2014/08/30 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年党员整改措施
2014/10/24 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python