插槽内容

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. python 用turtle 画小猪佩奇

    from turtle import * def nose(x,y):#鼻子 penup()#提起笔 goto(x,y)#定位 pendown()#落笔,开始画 setheading(-30)#将乌龟 ...

  2. Unity MonoBehaviour.Invoke 调用

    使用 Invoke() 方法需要注意 3点: 1 :它应该在 脚本的生命周期里的(Start.Update.OnGUI.FixedUpdate.LateUpdate)中被调用: 2:Invoke(); ...

  3. (转)Linux硬链接、软链接及inode详解

    inode 文件储存在硬盘上,硬盘的最小存储单位叫做“扇区”(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统读取硬盘的时候,不会一个个扇区地读取,这样效率太低,而是一次性连续读 ...

  4. Spring Cloud Ribbon负载均衡

    目录 一.简介 二.客户端负载均衡 三.RestTemplate详解 GET请求 POST请求 PUT请求 DELETE请求 一.简介 ​ Spring Cloud Ribbon是一个基于HTTP 和 ...

  5. easyUI 鼠标悬停某行提示

      最近参与公司的电子档案系统的开发,需求是需要用户鼠标悬停某一行时,需要根据后台业务数据进行提示. 档案系统开发采用的框架是struts2+mybatis+spring+easyUI开发,而前端的e ...

  6. SQLServer 索引的使用情况

    —在优化查询SQL语句,查看索引使用情况SQL语句: select db_name(database_id) as N'数据库名称', object_name(a.object_id) as N'表名 ...

  7. WebAPI创建

    一.创建Web API 1.Create a New Web API Project创建新的Web API项目 Start by running Visual Studio 2010 and sele ...

  8. Magento 中一个订单的“生命历程”

    当我们在网上愉快的买买买的时候, 你知道在这些屏幕“背后”正在进行着什么吗? 1. 当一个产品被加入到购物车后, 实际上发生了什么? 当第一个产品被加入到购物车, 系统首先会生成一个 quote (q ...

  9. Linux文件的三个时间属性(Atime,Mtime,Ctime)

    Linux下,一个文件有三种时间,分别是: 访问时间:atime 修改时间:mtime 状态时间:ctime 访问时间:对文件进行一次读操作,它的访问时间就会改变.例如像:cat.more等操作,但是 ...

  10. MySQL使用一张表的一列更新另一张表的一列

    使用MySQL中,在一张表etl_table_field_info上新增了一个字段tgt_table_en_name,该字段的值想从表etl_table_property_info的tgt_table ...