有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 <todo-list> 组件的模板可能包含了如下代码:

<ul>
<li
v-for="todo in todos"
v-bind:key="todo.id"
>
{{ todo.text }}
</li>
</ul>

但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。

为了让这个特性成为可能,你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上,然后将所有和其上下文相关的数据传递给这个插槽:在这个例子中,这个数据是 todo 对象:

<ul>
<li
v-for="todo in todos"
v-bind:key="todo.id"
>
<!-- 我们为每个 todo 准备了一个插槽,-->
<!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
<slot v-bind:todo="todo">
<!-- 回退的内容 -->
{{ todo.text }}
</slot>
</li>
</ul>

现在当我们使用 <todo-list> 组件的时候,我们可以选择为待办项定义一个不一样的 <template> 作为替代方案,并且可以通过 slot-scope 特性从子组件获取数据:

<todo-list v-bind:todos="todos">
<!-- 将 `slotProps` 定义为插槽作用域的名字 -->
<template slot-scope="slotProps">
<!-- 为待办项自定义一个模板,-->
<!-- 通过 `slotProps` 定制每个待办项。-->
<span v-if="slotProps.todo.isComplete">✓</span>
{{ slotProps.todo.text }}
</template>
</todo-list>

在 2.5.0+,slot-scope 不再限制在 <template> 元素上使用,而可以用在插槽内的任何元素或组件上。

解构 slot-scope

如果一个 JavaScript 表达式在一个函数定义的参数位置有效,那么这个表达式实际上就可以被 slot-scope 接受。也就是说你可以在支持的环境下 (单文件组件现代浏览器),在这些表达式中使用 ES2015 解构语法。例如:

<todo-list v-bind:todos="todos">
<template slot-scope="{ todo }">
<span v-if="todo.isComplete">✓</span>
{{ todo.text }}
</template>
</todo-list>

这会使作用域插槽变得更干净一些。

slot 插槽的作用域用法(摘自vue.js 官网)的更多相关文章

  1. vue.js 官网及组件网站记录

    官网 https://cn.vuejs.org/v2/guide/ 饿了么组件: http://element-cn.eleme.io/#/zh-CN/component/tree 异步请求框架插件 ...

  2. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  3. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  4. Vue学习官网和Vue的书籍 目录结构

    Vue基础知识学习网站[中文] https://cn.vuejs.org/v2/guide/ Vue路由知识学习网站[中文] https://router.vuejs.org/zh/guide/  V ...

  5. React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

    对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...

  6. Knockout.Js官网学习(简介)

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

  7. Vue.js官方文档学习笔记(三)创建Vue实例

    创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...

  8. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

  9. Knockout.Js官网学习(Mapping高级用法二)

    使用ignore忽略不需要map的属性 如果在map的时候,你想忽略一些属性,你可以使用ignore累声明需要忽略的属性名称集合: " }; var mapping = { 'ignore' ...

随机推荐

  1. vue 去除前后空格trim

    一.使用trim修饰符 <input v-model.trim = "massage" > 二.使用filter过去属性 html: <ul id="l ...

  2. JFreeChart柱状图单组柱子的不同颜色显示

    JFreeChart柱状图中单组柱子用不同颜色来显示的实现方法是自定义一个Renderer来继承BarRenderer类,然后重载getItemPaint(int i,int j)方法. 实现效果如下 ...

  3. Webserver管理系列:6、网络和共享中心的安全配置

    1.关闭网络发现 2.关闭文件和打印机共享 3.关闭公用目录共享 4.启用password保护共享

  4. 一个非常好的php实现手机号归属地查询接口类

    前一阵子看到了一个非常好的php手机归属地查询的类,写的很精简,查询也很精确!大致代码是这样的: <?php header("Content-type:text/html;charse ...

  5. Linux 性能分析工具汇总合集

    出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识, ...

  6. PAT A1153 Decode Registration Card of PAT (25 分)——多种情况排序

    A registration card number of PAT consists of 4 parts: the 1st letter represents the test level, nam ...

  7. Winform 基础一 panel

    一 居上.居中.居下 二 添加子控件 三 适应不同分辨率 四 内容超出,显示滚动条 一 .居上.居中.居下 二.添加子页面 Form7 childFrm = new Form7(); childFrm ...

  8. jmeter(十六)配置元件之计数器

    刚翻看了一下博客的草稿箱,发现很多未完成的草稿,拖了很久,趁着今天较空闲,就补上关于jmeter计数器这篇吧,拖延症,要不得啊... 先说说利用jmeter生成数据的几种方法: 1.CSV Data ...

  9. 学习CSS布局 - box-sizing

    box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素 ...

  10. BesLyric 全新版本下载 ( windows \ mac \ linux )

    导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 很荣幸地,自 beslyric 2017 年开发推出以来,得到了很多云村村民的肯定,现在 ...