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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
jquery高效反选具体实现
May 05 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
详解puppeteer使用代理
Dec 27 Javascript
JS实现滑动插件
Jan 15 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下使用以下代码连接并测试
2008/04/09 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
div层的移动及性能优化
2010/11/16 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
Python群发邮件实例代码
2014/01/03 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
单链表反转python实现代码示例
2018/02/08 Python
浅析python的Lambda表达式
2019/02/27 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
自考毕业自我鉴定范文
2013/10/27 职场文书
重阳节主题班会
2015/08/17 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers