插槽

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。

插槽内容

Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

它允许你像这样合成组件：

<navigation-link url="/profile"> Your Profile</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为：

<a  v-bind:href="url" class="nav-link"> <slot></slot></a>

当组件渲染的时候，这个 <slot> 元素将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：

<navigation-link url="/profile"> <!-- 添加一个 Font Awesome 图标 --> <span class="fa fa-user"></span> Your Profile</navigation-link>

甚至其它的组件：

<navigation-link url="/profile"> <!-- 添加一个图标的组件 --> <font-awesome-icon name="user"></font-awesome-icon> Your Profile</navigation-link>

如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。

具名插槽

有些时候我们需要多个插槽。例如，一个假设的 <base-layout> 组件多模板如下：

<div class="container"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --> </footer></div>

对于这样的情况，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer></div>

在向具名插槽提供内容的时候，我们可以在一个父组件的 <template> 元素上使用 slot特性：

<base-layout>  <template slot="header"> <h1>Here might be a page title</h1> </template>

 <p>A paragraph for the main content.</p> <p>And another one.</p>

 <template slot="footer"> <p>Here's some contact info</p> </template></base-layout>

另一种 slot 特性的用法是直接用在一个普通的元素上：

<base-layout>  <h1 slot="header">Here might be a page title</h1>

 <p>A paragraph for the main content.</p> <p>And another one.</p>

 <p slot="footer">Here's some contact info</p></base-layout>

我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是：

<div class="container"> <header> <h1>Here might be a page title</h1> </header> <main> <p>A paragraph for the main content.</p> <p>And another one.</p> </main> <footer> <p>Here's some contact info</p> </footer></div>

默认插槽的内容

有的时候为插槽提供默认的内容是很有用的。例如，一个 <submit-button> 组件可能希望这个按钮的默认内容是“Submit”，但是同时允许用户覆写为“Save”、“Upload”或别的内容。

你可以在 <slot> 标签内部指定默认的内容来做到这一点。

<button type="submit"> <slot>Submit</slot></button>

如果父组件为这个插槽提供了内容，则默认的内容会被替换掉。

编译作用域

当你想在插槽内使用数据时，例如：

<navigation-link url="/profile"> Logged in as {{ user.name }}</navigation-link>

该插槽可以访问跟这个模板的其它地方相同的实例属性 (也就是说“作用域”是相同的)。但这个插槽不能访问 <navigation-link> 的作用域。例如尝试访问 url 是不会工作的。牢记一条准则：

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

作用域插槽

2.1.0+ 新增

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 <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>

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

转载于:https://www.cnblogs.com/e493825156/p/9034395.html

vue插槽的使用（slot）相关推荐

  1. vue插槽的理解 slot slot-scop,三种插槽方式,默认插槽,具名插槽,作用域插槽

    es6写法可借鉴 父组件中的写法

  2. vue插槽--slot

    2019独角兽企业重金招聘Python工程师标准>>> vue插槽--slot,在很多三方的UI框架里大量的使用了插槽,像现在用的比较多的饿了么的ElementUI 在这里有自己写的 ...

  3. Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法

    1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法 ...

  4. vue插槽样式_Vue 插槽(slot)使用(通俗易懂)

    因为在2.6.0中,具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令).它取代了 slot 和 slot-scope,并且现在网上都说的是一些老版本的内容,官方文档不太容易理 ...

  5. Vue学习笔记 (九) slot插槽-新旧版本用法(vue2.6.0前后)

    slot 翻译为插槽,插槽的目的是让我们原来的设备具备更多的扩展性.vue组件中使用插槽,也是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么. vue2.6.0之前 ...

  6. vue插槽 - slot

    vue插槽 - slot 前言 一.插槽内容 二.编译作用域 三. 后备内容 四. 具名插槽 五. 作用域插槽 1. 基本用法 2. 独占默认插槽的缩写语法 3. 解构插槽Prop 六. 动态插槽名 ...

  7. Vue（07）——slot插槽和自定义事件

    文章目录 Vue(07)--slot插槽和自定义事件 1.slot插槽 2.自定义事件 Vue(07)--slot插槽和自定义事件 1.slot插槽 什么是插槽 Vue 实现了一套内容分发的 API, ...

  8. Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）

    目录 前言 正文 插槽是什么? 怎么使用插槽? 基本用法 后备(默认)内容 具名插槽 作用域插槽 插槽版本变化 总结 前言 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基 ...

  9. vue 插槽 slot 的用法

    vue 插槽 slot 的用法 一.简单定义.使用 slot 二.slot 变量传值 三.跨组件传递 slot 方法1: 多定义一个中间插槽 方法2:使用 scopedSlots 字段 传递作用域插槽 ...

  10. Vue中的Ajax②(slot插槽)

    文章目录 案例引入 默认插槽 具名插槽 作用域插槽 总结 案例引入 我们现在有一个需求: 代码: App组件: <template><div class="containe ...

最新文章

  1. 寒假作业，2.25，G - iBoard
  2. t - sql的阶梯:超越基础水平2:写子查询
  3. php接收流文件,PHP传输文件流及文件流的保存
  4. ubuntu常见问题：could not get lock /var/lib/dpkg/lock -open
  5. 在SQL Server2005中使用 .NET程序集
  6. PropertiesUtil 获取文件属性值
  7. TreeViewVisitor: 一个快捷访问 TreeView 控件节点的帮助类
  8. python perl 正则_为什么说perl的正则表达式功能比Python强大
  9. Android 多媒体框架stagefright
  10. 怎么卸载apowerrec_怎么禁用或卸载自带应用
  11. 平台H5对接支付宝支付接口(含分布式源码)
  12. Arduino 传感器: 使用FSR402压力传感器检测压力
  13. 宜家开发中心东亚区完成在中国的全新升级；牙科巨头卡瓦集团上海创新卓越中心正式启动 | 美通企业日报...
  14. 验证电话号码,支持手机座机可加国家代码和区号，座机支持分机
  15. #爬取电影天堂的磁力链接#
  16. git clean -fd 命令删除文件之后 项目工程文件恢复
  17. 后量子密码（PQC）决赛入围算法和候选算法
  18. C#使用OleDB操作ACCESS插入数据时提示:标准表达式中数据类型不匹配。
  19. 002.2-地下管线转3dtiles工具
  20. js微信h5页面背景音乐

热门文章

  1. CMake生成Opencv在vs 2013的解决方案（出错1）
  2. 夫妻两人同一个银行各自存50万，银行破产了该赔多少？
  3. “80后”作家应扮演更重要的角色
  4. mybatis insert 忽略 联合唯一索引_MySQL实战中，Insert语句的使用心得总结
  5. python系统自学_如何系统地自学python
  6. pyautogui 打包 运行 窗口_试试动态窗口管理器 dwm 吧
  7. typescript-koa-postgresql 实现一个简单的rest风格服务器 —— 连接 postgresql 数据库...
  8. 第一次作业：深入Linux源码分析进程模型
  9. Android gravity和layout_gravity的区别
  10. JS的自定义事件（观察者模式）