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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
对python中return和print的一些理解
2017/08/18 Python
python3的输入方式及多组输入方法
2018/10/17 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python中树与树的表示知识点总结
2019/09/14 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
一个SQL面试题
2014/08/21 面试题
女方婚礼新郎答谢词
2014/01/11 职场文书
致全体运动员广播稿
2014/02/01 职场文书
市场营销战略计划书
2014/05/06 职场文书
2014年女职工工作总结
2014/11/27 职场文书
班主任开场白
2015/06/01 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技