学习vue.js也有一段时间了,关于slot这一块,也看了不少次了,总感觉有点迷迷糊糊,不知其然也不知其所以然,抽出一段完整的时间,再一次仔细学习。稍微有点理解了,在此稍作记录,好记性不如烂笔头嘛!

vue关于实现slot的原因也给与了解释:

为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。
Vue.js 实现了一个内容分发 API,参照了当前 Web Components 规范草案,使用特殊的 <slot> 元素作为原始内容的插槽。

  也就是说slot的主要作用是“内容分发”,所以才实现<slot>元素的,那么究竟什么才是内容分发呢?

  从我个人浅显的理解就是:

    当一个子组件当中,大部分元素是可共用的,只有部分略有差别的时候,这时候就可以通过父组件实现内容分发,从而定制子组件当中略有差别的内容。

  举例来说:

  

以当前两个页面来说,学校排行和作品排行的列表基本上就是一样,但是不可否认,他们也不完全一样,所以此时如果使用内容分发的话,可能相对能够更简便的吧(当然,使用各自子组件也必然能够实现相同效果)!

RankSchool.vue和RankWorks.vue两个文件作为父组件,都需要调用RankTable.vue

先看一下RankTable.vue的内容:

<template>
<table>
<slot name="title"><caption>作品排行</caption></slot>
<thead>
<slot name="header">
<tr>
<th>序号</th>
<th>姓名</th>
<th>ID</th>
<th>学校</th>
<th>点赞数</th>
</tr>
</slot>
</thead>
<tbody>
<slot>
<tr v-for="(item, index) in items" :key="item.id + index">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.id}}</td>
<td>{{item.school}}</td>
<td>{{item.praise}}</td>
</tr>
</slot>
</tbody>
</table>
</template>

  至于里面的数据,暂不考虑,其实子组件文件还是比较简单的,就是子组件的所有内容,唯一的区别之处在于,在有可能做内容分发的地方使用<slot>标签,我们当前文件有三个地方可能产生内容分发,

  <caption>作品排行</caption>

  两个排行榜名称应该是不一样的,所以使用<slot name="title"></slot>将<caption>作品排行</caption>这个标签包裹起来。

  第二处内容分发的地方在table的表头,也就是thead标签。

        <tr>
<th>序号</th>
<th>姓名</th>
<th>ID</th>
<th>学校</th>
<th>点赞数</th>
</tr>

  我们使用<slot name="header"></slot>将这一段包裹。

  还有一处自然是真正的列表部分了,

        <tr v-for="(item, index) in items" :key="item.id + index">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.id}}</td>
<td>{{item.school}}</td>
<td>{{item.praise}}</td>
</tr>

  也使用<slot></slot>包裹,允许有匿名的slot,但是为了清晰而言,建议除非当前组件内只有一个slot,否则就将所有slot予以命名。

  由于我们的子组件基本上是以“作品排行”的内容作出来的页面,所以在RankWorks.vue中调用时,就直接调用就好了

<template>
<div class="ranking">
<loading v-if="loading"></loading>
<rank></rank>
</div>
</template>
<script>
import Rank from "./RankTable"
export default {
components: {
Rank
}
}
</script>

  简单方便,与正常的组件调用没有任何区别。

  而在“学校排行”组件RankSchool.vue文件中调用的时候,就需要我们注意了,得做好内容分发,不然展现的列表就与“作品排行”一样了。

<template>
<div class="ranking">
<loading v-if="loading"></loading>
<rank>
<caption slot="title">学校排行</caption>
<tr slot="header">
<th>序号</th>
<th>学校</th>
<th>综合得分</th>
</tr>
<tr v-for="(item, index) in lists" :key="item.id">
<td>{{index + 1}}</td>
<td>{{item.school}}</td>
<td>{{item.score}}</td>
</tr>
</rank>
</div>
</template>

  其实,也就是在<rank></rank>标签内添加内容,以标签上加slot="名称"来区分当前内容将要分发到子组件哪一个slot当中,如果都没有slot="名称",会将所有内容填充的子组件的<slot></slot>当中,也就是子组件当中匿名的slot当中。

  可以总结出来这么一个简单方法:

  子组件按照平时写组件的习惯写,等到子组件完全写好之后,在父组件调用时,发现哪里需要分发内容的,回到子组件当中,使用<slot name="名称"></slot>将子组件中需要替换的这一部分给包裹起来。是不是很简单呢?

  可能在简单项目,或者多数项目当中,未必需要使用<slot></slot>内容分发,但是掌握<slot></slot>不是也能精简我们的vue文件么?

vue2.0 slot用法的更多相关文章

  1. vue2.0 transition用法

    html: <div id="demo"> <button v-on:click="show = !show"> Toggle < ...

  2. [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

    在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...

  3. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  4. vue1.0 与 Vue2.0的一些区别 及用法

    1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...

  5. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

  6. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  7. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  8. Vue2.0组件的继承与扩展

    如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...

  9. Vue2.0 基础入门

    前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符 创建实 ...

随机推荐

  1. jmeter ---监控服务器CPU, 内存,网络数据

    JMeter如何收集获得服务器cpu,内存,磁盘,网络等相关资源使用率的信息 1. JMeter 自带的Monitor Results 监控 JMeter 自带的Monitor Results 在官网 ...

  2. 中文自然语言处理工具hanlp隐马角色标注详解

    本文旨在介绍如何利用HanLP训练分词模型,包括语料格式.语料预处理.训练接口.输出格式等. 目前HanLP内置的训练接口是针对一阶HMM-NGram设计的,另外附带了通用的语料加载工具,可以通过少量 ...

  3. linux mv命令详解

    Linux mv命令 Linux mv命令用来为文件或目录改名.或将文件或目录移入其它位置. 用法: mv [选项]... [-T] 源文件 目标文件 mv [选项]... 源文件... 目录 mv ...

  4. mac 蓝牙开启调试模式

    mac 蓝牙开启调试模式 按住shift+option+鼠标右键点右上角的蓝牙图标

  5. Elasticsearch的数据导出和导入操作(elasticdump工具),以及删除指定type的数据(delete-by-query插件)

    Elasticseach目前作为查询搜索平台,的确非常实用方便.我们今天在这里要讨论的是如何做数据备份和type删除.我的ES的版本是2.4.1. ES的备份,可不像MySQL的mysqldump这么 ...

  6. ML: 聚类算法R包 - 模型聚类

    模型聚类 mclust::Mclust RWeka::Cobweb mclust::Mclust EM算法也称为期望最大化算法,在是使用该算法聚类时,将数据集看作一个有隐形变量的概率模型,并实现模型最 ...

  7. Windows 消息【二】窗口函数

    前一篇文章讲到非队列消息会直接把消息Dispatch到窗口函数上,窗口函数长什么样? //就是一个大case分支 //要想拦截消息,override窗口函数是一个办法! procedure TCust ...

  8. spring IOC中四种依赖注入方式

    在spring ioc中有三种依赖注入,分别是:https://blog.csdn.net/u010800201/article/details/72674420 a.接口注入:b.setter方法注 ...

  9. dubbo-admin在jdk8下不兼容

    参考这里 修改pom.xml webx的依赖改为3..6版 <dependency> <groupId>com.alibaba.citrus</groupId> & ...

  10. 转自高手关于SQL 锁的叙述。。(nolock,rowlock,tablock,xlock,paglock)

    锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: [丢失更新]A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 ...