vue插槽的使用（slot）
插槽
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。
插槽内容
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）相关推荐
- vue插槽的理解 slot slot-scop,三种插槽方式,默认插槽,具名插槽,作用域插槽
es6写法可借鉴 父组件中的写法
- vue插槽--slot
2019独角兽企业重金招聘Python工程师标准>>> vue插槽--slot,在很多三方的UI框架里大量的使用了插槽,像现在用的比较多的饿了么的ElementUI 在这里有自己写的 ...
- Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法 ...
- vue插槽样式_Vue 插槽(slot)使用(通俗易懂)
因为在2.6.0中,具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令).它取代了 slot 和 slot-scope,并且现在网上都说的是一些老版本的内容,官方文档不太容易理 ...
- Vue学习笔记 (九) slot插槽-新旧版本用法(vue2.6.0前后)
slot 翻译为插槽,插槽的目的是让我们原来的设备具备更多的扩展性.vue组件中使用插槽,也是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么. vue2.6.0之前 ...
- vue插槽 - slot
vue插槽 - slot 前言 一.插槽内容 二.编译作用域 三. 后备内容 四. 具名插槽 五. 作用域插槽 1. 基本用法 2. 独占默认插槽的缩写语法 3. 解构插槽Prop 六. 动态插槽名 ...
- Vue（07）——slot插槽和自定义事件
文章目录 Vue(07)--slot插槽和自定义事件 1.slot插槽 2.自定义事件 Vue(07)--slot插槽和自定义事件 1.slot插槽 什么是插槽 Vue 实现了一套内容分发的 API, ...
- Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）
目录 前言 正文 插槽是什么? 怎么使用插槽? 基本用法 后备(默认)内容 具名插槽 作用域插槽 插槽版本变化 总结 前言 Vue中的插槽(slot)在项目中用的也是比较多的,今天就来介绍一下插槽的基 ...
- vue 插槽 slot 的用法
vue 插槽 slot 的用法 一.简单定义.使用 slot 二.slot 变量传值 三.跨组件传递 slot 方法1: 多定义一个中间插槽 方法2:使用 scopedSlots 字段 传递作用域插槽 ...
- Vue中的Ajax②(slot插槽)
文章目录 案例引入 默认插槽 具名插槽 作用域插槽 总结 案例引入 我们现在有一个需求: 代码: App组件: <template><div class="containe ...
最新文章
- LeetCode简单题之完成一半题目
- Google SRE系列第三部来了！
- build 之前执行task_一次NPM前端项目的CI-Build速度优化
- 理解严格模式下JavaScript的this指向的变化
- 如何在 SAP BTP Java 应用里使用 SQLite 数据库
- git团队如何提交_如何使您的提交消息很棒并保持团队快乐
- Java面试题-2021
- python竞赛内存_python的内存机制
- java 把数据写入xml_java中用jdom 如何创建xml文档/将数据写入XML中
- C语言入门了解篇—C语言编译流程
- Platform SDK and SB2
- 用户故事与敏捷方法笔记---迭代计划
- 廊坊交警利用智能交通管控平台助力平安建设工作
- 为什么要选择平台+独立站运营的双轨模式
- 启动计算机显示屏没反应,电脑开机后显示器无反应怎么办
- Office 2013-2021 C2R Install
- uniApp App端跳转到深色页面闪白记录及优化处理方法
- 【复变函数与积分变换】第1章 复数——1.1 复数的定义及其四则运算
- 打印时总跟出一页计算机主的纸,打印机只打印一页却重复不停打印的原因之一和解决方法...
- 直播软件开发公司来告诉你什么是互动直播