Vue插槽
插槽内容
Vue实现一套内容分发的API, 这套API基于当前的web组件规范草案,将元素作为承载分发内容的出口。
<navigation-link url="/profile">
Your Profile
</navigation-link>
然后在的模板中可能会写为:
<a :href="url" class="nav-link">
<slot></slot>
</a>
当组件渲染的时候,这个元素将会被"Yourt Profile"替换。插槽可以包括任何模板代码,包括HTML:
<navigation-link url="/profile">
<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>
如果没有包含一个元素,则任何传入它的内容都会被抛弃。
具名插槽
有些时候我们需要多个插槽,例如:
<div>
<header>我们希望把页头放这里</header>
<main>我们希望把主要内容放这里</main>
<footer>我们希望把页脚放这里</footer>
</div>
对于这种情况,元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
在向具名插槽提供内容的时候,我们可以在一个父组件的元素上使用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 is 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 is 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",但是同时允许用户覆盖"Save","Upload"或者别的内容。
你可以在组件模板里的标签内部指定默认的内容来做到这一点。
<button type="submit">
<slot>Submit</slot>
</button>
如果父组件为这个插槽提供内容,则默认内容会被替换。
编译作用域
当你想在插槽内使用数据时,例如:
<navigation-link url="/profile">
Logged in as {{ user.name }}
</navigation-link>
该插槽可以访问跟这个模板的其他地方相同的实例属性(也就是说作用域相同)。但这个插槽不能访问的作用域。例如尝试访问URL是不会工作的。牢记:
>**父组件模板的所有东西都会在父级作用域内编译;子组件的模板的所有东西都会在子级作用域内编译。**
作用域插槽
有时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽:
<ul>
<li v-for="todo in todos" v-bind="todo.id">
{{ todo.text }}
</li>
</ul>
但是在我们应用的某些部分,我们希望每个独立的代办项渲染出和todo.text不太一样的东西。这也是作用域插槽的用武之地。
为了让这个特性成为可能,你需要做的全部事情就是将代办项内容包裹在一个元素上,然后将所有和其上下文有关的数据传递给这个插槽:在这个例子中,这个数据是todo对象:
<ul>
<li v-for="todo in todos" :key="todo.id">
<slot :todo="todo">{{ todo.text }}</slot>
</li>
</ul>
现在当我们使用组件的适合,我们可以选择为代码项定义一个不一样的作为替代方案,并且可以通过slot-scope特性从子组件获取数据:
<todo-list :todos="todos">
<!-- 将 `slotProps` 定义为插槽作用域的名字 -->
<template slot-scope="slotProps">
<!-- 为待办项自定义一个模板,-->
<!-- 通过 `slotProps` 定制每个待办项。-->
<span v-if="slotProps.todo.is">good</span>
{{ slotProps.todo.text }}
</template>
</todo-list>
解构 slot-scope
如果一个JavaScript表达式在一个函数定义的参数位置有效,那么这个表达式实际上就可以被slot-scope接受。也就是说你可以在支持的环境下,在这些表达式中使用ES2015解构语法。
<todo-list :todos="todos">
<template slot-scope="{ todo }">
<span v-if="todo.isComplete">✓</span>
{{ todo.text }}
</template>
</todo-list>
Vue插槽的更多相关文章
- Vue插槽:(2.6.0以后版本弃用slot和slot-scope,改用v-slot)
关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...
- Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- Vue插槽的另外一些特性
之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...
- 学习笔记:Vue——插槽
关于Vue插槽,只用过最简单的语法,现在完整地走一遍官方文档说明,并且探索更多用法. 01.如果组件中没有包含一个<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃. 0 ...
- vue插槽用法(极客时间Vue视频笔记)
vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue插槽的深入理解和应用
一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...
- Vue 插槽
插槽的概念: 插槽的关键字slot,默认情况下,组件中的模板会覆盖组件中的原始内容(即自定义标签对内部的内容会不显示),解决办法就是使用插槽. 组件的原始内容: 即在vue实例范围之内,因此可以调用实 ...
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...
- Vue插槽 slot
1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
- vue插槽slot的理解与使用
一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...
随机推荐
- Maven配置默认JDK/JRE版本
1. settings.xml的profiles标签下配置 <profile> <id>jdk-1.8</id> <activation> <ac ...
- Android 中文 API (101) —— AsyncTask
一.结构 public abstract class AsyncTask extends Object java.lang.Object android.os.AsyncTask<Params, ...
- 用命令行的方式将本地项目上传到git
1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...
- OO 第四单元总结
一.总结本单元两次作业的框架设计 1.1. 需求分析 通过分析mdj文件可知,两次作业如果对于时间复杂度没有要求,可以不涉及任何数据结构,直接根据读入的UML_ELEMENT逐个分析得到各个函数的结果 ...
- SpringMVC 返回自定义属性名
SpringMVC 返回的属性名默认是小写驼峰形式的实体对象中的属性名,如 userID 属性名它会返回 userId. 如果接口方式之前已经定下来,这样前端按原来的方式取数据会读取失败的,那有没有方 ...
- echarts的title和legend重合解决(各种小细节)
一:关于title与legend重叠 1.重合样子 2.解决办法: legend:{ show: true, top:"6%",//与上方的距离 可百分比% 可像素px }, 3. ...
- Oracle Form个性化案例(一)
业务场景: 现有Form A,需通过A中的菜单栏中调用另一Form B,需将某值作为参数传入Form B中:
- Android RecycleView实现混合Item布局
首先来看看效果吧: 效果预览.png 本实例来自于慕课网的视屏http://www.imooc.com/video/13046,实现步骤可以自己去观看视屏,这里只记录了下实现的代码. 添加依赖: (1 ...
- iBrand 教程:Xshell 软件安装过程截图及配置
下载 教程中使用的相关软件下载网盘: https://pan.baidu.com/s/1bqVD5MJ 密码:4lku 安装 请右键以管理员身份运行进行软件安装,安装过程如下: 配置 安装完成并运行软 ...
- 腾讯云服务器手动和自动安装WordPress网站程序
如果我们需要建站的话,对于基础个人网站.博客建站选择基础的1Mbps带宽配置的1GB内存的腾讯云服务器还是够用的,且如果我们需要用来建网站的话可以手工添加程序,以及有些面板,比如宝塔面板是自带CMS程 ...