插槽内容

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插槽的更多相关文章

  1. Vue插槽:(2.6.0以后版本弃用slot和slot-scope,改用v-slot)

    关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...

  2. Vue 插槽详解

    Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...

  3. Vue插槽的另外一些特性

    之前有个项目,想判断一下,某一个模板内的插槽是否被使用. 不知道是不是问题过于简单,网上没有这方面的说明.我就抽时间验证一下vue插槽相关的一些功能. 然后写下这篇随笔,希望对后来人能有一些帮助. 简 ...

  4. 学习笔记:Vue——插槽

    关于Vue插槽,只用过最简单的语法,现在完整地走一遍官方文档说明,并且探索更多用法. 01.如果组件中没有包含一个<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃. 0 ...

  5. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. Vue插槽的深入理解和应用

    一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...

  7. Vue 插槽

    插槽的概念: 插槽的关键字slot,默认情况下,组件中的模板会覆盖组件中的原始内容(即自定义标签对内部的内容会不显示),解决办法就是使用插槽. 组件的原始内容: 即在vue实例范围之内,因此可以调用实 ...

  8. vue 插槽slot

    本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...

  9. Vue插槽 slot

    1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...

  10. vue插槽slot的理解与使用

    一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...

随机推荐

  1. D. Time to Raid Cowavans 分块暴力,感觉关键在dp

    http://codeforces.com/contest/103/problem/D 对于b大于 sqrt(n)的,暴力处理的话,那么算出每个的复杂度是sqrt(n),就是把n分成了sqrt(n)段 ...

  2. Tree--lecture08

    1.二叉树 完全二叉树(complete binary tree):除了最下面一层都是满的,最下面一层也是优先排列在左边.这样的话父亲节点和孩子节点就在序号上面有关系: 父亲节点为n,那么子节点的编号 ...

  3. SpringBoot | 第一章:第一个SpringBoot应用

    springboot简单介绍 概述 SpringBoot的核心功能 优缺点 优点 缺点 工程搭建 创建项目 项目结构 pom依赖 主入口 编写controller 启动应用 总结 老生常谈 sprin ...

  4. Webpack webpack+gulp实现自动构建部署

    http://www.cnblogs.com/sloong/p/5826859.html

  5. hibernate课程 初探单表映射3-2 基本类型

    本节内容:(介绍基本类型) 1 数据类型 简介 2 时间类型 简介 3 时间类型 demo 1 hibernate类型 java类型   integer/int java.lang.Integer/i ...

  6. SSM整合笔记

    SSM整合笔记 1,创建maven项目 创建maven项目过程省略 ps:如果创建完maven项目之后项目报错,可能是没有配置Tomcat 2,在pom.xml里面导入相应的jar的依赖 <pr ...

  7. python中函数的定义与调用

    1.为什么要用函数? (1)代码重复太多(2)可读性差 使用函数的好处: (1)代码重用 (2)保持一致性,易维护 (2)可扩展性 2.初始函数定义与调用     函数的定义 def test(x): ...

  8. 根据要求完成表单以及使用servlet处理表单 任务要求 掌握Servlet输出表单和接收表单数据(多值组件的读取)。

    Servlet代码: package com.test; import java.io.IOException; import java.io.PrintWriter; import java.uti ...

  9. 并发访问sqlite数据库出现databse is locked的错误的一个解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在并发访问sqlite数据库会出现这样一个错误:databseis locked,这是sqlite数据库对并发支持不太 ...

  10. Android接入支付宝支付实现

    接上篇android接入微信支付文章,这篇我们带你来接入支付宝支付服务 简介 首先要说明的是个人感觉接入支付宝比微信简单多了,很轻松的,所以同学们不要紧张~ 当然还是老规矩啦,上来肯定的贴上官网地址, ...