插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示。

由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。

非插槽模板指的是html模板,比如‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;

插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置确由子组件自身决定,slot写在组件template的什么位置,父组件传过来的模板将来就显示在什么位置。

单个插槽 | 默认插槽 | 匿名插槽

首先是单个插槽,单个插槽是vue的官方叫法,但是其实也可以叫它默认插槽,或者与具名插槽相对,我们可以叫它匿名插槽。因为它不用设置name属性。

单个插槽可以放置在组件的任意位置,但是就像它的名字一样,一个组件中只能有一个该类插槽。相对应的,具名插槽就可以有很多个,只要名字(name属性)不同就可以了

关于slot-scope的一篇文章,原文地址 https://blog.csdn.net/qq_28929589/article/details/82896364

另一篇不错的文章: https://www.jb51.net/article/133733.htm

slot-scope的更多相关文章

  1. [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component

    Components with slots can expose their data by passing it into the slot and exposing the data using  ...

  2. emitted value instead of an instance of error the scope attribute for scoped slots webpack babel polyfill

    api20180803.vue emitted value instead of an instance of error the scope attribute for scoped slots h ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. vue 表格树 固定表头

    参考网上黄龙的表格树进行完善,并添加固定表头等的功能,目前是在iview的项目中实现,如果想在element中实现的话修改对应的元素标签及相关写法即可. <!-- @events @on-row ...

  5. vue学习:props,scope,slot,ref,is,slot,sync等知识点

    1.ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息.refs是一个对象,包含所有的ref组件. <div id="parent"> <user- ...

  6. Vue内容分发slot

    前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web ...

  7. 理解vue中的scope的使用

    理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...

  8. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  9. slot

    本文涉及的slot有:<slot>,v-slot吗,vm.$slots,vm.$scopedSlots 废弃的使用特性:slot,slot-scope,scope(使用v-slot,2.6 ...

  10. Slot使用

    1.组件中有单个或多个未命名slot标签时,如下:<Child><span style=”color:red;”>hello world</span></Ch ...

随机推荐

  1. cesium3dtiles位置改变

    cesium偏移3dtiles高度var heightOffset = 20.0; var boundingSphere = tileset.boundingSphere; var cartograp ...

  2. Oracle的SQL优化思路

    个人总结SQL脚本优化,大体如下: (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表dir ...

  3. 6.1 集合和映射--集合Set->底层基于二叉搜索树实现

    前言:在第5章的系列学习中,已经实现了关于二叉搜索树的相关操作,详情查看第5章即可.在本节中着重学习使用底层是我们已经封装好的二叉搜索树相关操作来实现一个基本的集合(set)这种数据结构.集合set的 ...

  4. flink 学习

    一.运行 SockWordCount例子 1.到官网上下载 flink-1.6.2-bin-hadoop27-scala_2.11.tgz 然后加压出来 2.cd flink-1.6.2 3.打开fl ...

  5. 我的coding地址

    https://dev.tencent.com/u/dtid_d6b0780bdefc3f9c/follower#1

  6. java split方法

    String a = "O|O||"; System.out.println(a.split("\\|").length); //["O", ...

  7. vue-cli 报Module build failed: Error: No parser and no file path given, couldn't infer a parser.错的解决方法

    出错提示如下: ERROR Failed to compile with errors :: error in ./src/App.vue Module build failed: Error: No ...

  8. 第一周pta作业2

    7-2 求最大值及其下标 (20 分) 本题要求编写程序,找出给定的n个数中的最大值及其对应的最小下标(下标从0开始). 输入格式: 输入在第一行中给出一个正整数n(1<n≤10).第二行输入n ...

  9. OO第一单元小结

    写在前面 在接触OO课程之前,自己是完全没有学习过java语言的,因此作为一名初的不能再初的初学者,无论是在哪方面都会有许多茫然,但是我相信通过一次次认真的完成OO作业,我对面向对象的理解应该会渐渐的 ...

  10. 【JDBC】java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.

    在使用阿里的druid 时,报了一个异常java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized ...