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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jquery异步请求实例代码
Jun 21 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
angularjs1.X 重构controller 的方法小结
Aug 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/09/28 PHP
php学习之function的用法
2012/07/14 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
python的re模块应用实例
2014/09/26 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python pillow模块使用方法详解
2019/08/30 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
环境卫生标语
2014/06/09 职场文书
爱护公物标语
2014/06/24 职场文书
代理人委托书
2014/08/01 职场文书
机关职员工作检讨书
2014/10/23 职场文书
企业工会工作总结2015
2015/05/13 职场文书