父组件在子组件内套的内容,是不显示的;vue有一套内容分发的的API,<slot>作为内容分发的出口,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、如何显示,就是slot分发负责。

1. 基础使用(单个插槽的使用)

  使用的组件元素中写HTML代码,在组件中需要的位置用 <slot></slot>进行接收。

  script中引入组件

  

  使用组件元素的中间写HTML代码,在该部位只能引用这个组件中的数据,而不能使用sonComponent组件中的数据。

  

  在组件中用<slot></slot>进行接收,如果没有用<slot></slot>进行接收,传入的元素会被遗弃。

  

2. 具名插槽(组件中使用多个插槽)

  对额外的插槽,<slot>添加name属性, 使用组件中每一部分HTML用template包起来,并给template元素设置slot属性和每一个slot的name属性对应起来。

  使用组件中间的部分多个模块,并且用template包裹起来,没有用template包裹起来的对应没有name属性的slot元素。

    

  在组件中对应的位置用slot(设置相应的name属性)接收传入的HTML;(, 可以保留一个未命名插槽,这个插槽是默认插槽,也就是说它会作为所有未匹配到插槽的内容的统一出口)。

    

3. 在插槽中使用引用的组件的值 slot-scope

  在template上用slot-scope接收组件中传出来的值。(在 2.5.0 之前,slot-scope 被命名为 scope 且被限制只能在 <template> 元素上使用。从 2.5.0 开始,slot-scope 不再具有这些限制,而可以用在插槽内的任何元素或组件上。)

    

  组件中接收HTML的slot的元素传值。

    

  结构slot-scope(在传出多个值的时候比较干净)。

    

    

4. 插槽的默认内容。

    在组件模板里的 <slot> 标签内部指定默认的内容。

    当对应的插槽没有传入HTML内容的时候,会显示在<slot></slot>元素中间的内容,如果父组件中提供了值,那么<slot></slot>中的内容会被覆盖。

    

vue-slot的使用的更多相关文章

  1. vue自学入门-4(vue slot)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  2. vue slot nested bug

    vue slot nested bug slot name bug Error <slot name="global-system-guide-slot"></s ...

  3. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  4. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  5. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  6. vue slot 复用

    话不投机半句多,直接上代码 有3步 第一步:创建渲染slot的组件 重要 第二步:为slot添加父组件数据(props) 重要 第三步:使用 第一步:创建渲染slot的组件 首选创建一个单文件组价,由 ...

  7. vue slot

    一直觉得vue的slot比较申请,而且比较深奥,总有点不想用的感觉,事实上,在一定程度上,也真的可以完全避开slot就能把一个项目完全搭建完成. 但是随着用的次数越来越多,看到的内容也越来越多的情况, ...

  8. 1_02 Vue Slot

    slot 插槽 插槽内容 const component ={ template: ` <div> <slot></slot> </div> ` } n ...

  9. vue slot插槽的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Vue slot简单理解

    情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child',{ template:`<div ...

随机推荐

  1. 中国剩余定理(CRT) & 扩展中国剩余定理(ExCRT)总结

    中国剩余定理(CRT) & 扩展中国剩余定理(ExCRT)总结 标签:数学方法--数论 阅读体验:https://zybuluo.com/Junlier/note/1300035 前置浅讲 前 ...

  2. P5504 [JSOI2011]柠檬

    传送门 显然考虑 $dp$ ,发现从右往左和从左往右是一样的,所以只考虑一边就行 发现对于切的左右端点,选择的 $s0$ 一定要为左右端点的贝壳大小,不然这个端点不产生贡献还不如分开来单个贡献 所以设 ...

  3. VINS 估计器之外参初始化

    为何初始化外参 当外参完全不知道的时候,VINS也可以在线对其进行估计(rotation),先在processImage内进行初步估计,然后在后续优化时,会在optimize函数中再次优化. 如何初始 ...

  4. 谷歌浏览器安装插件时出现:程序包无效:“CRX_HEADER_INVALID" 后的解决办法

    以安装书签管理插件Neater Bookmarks为例: 1.下载:网址http://www.cnplugins.com/zhuanti/sixbookmarksintroduce.html 2.将下 ...

  5. js的事件流理解

    面试问到js的事件流,当时说的不是很清楚,现在觉得有必要把这个弄清楚. 事件捕获和事件冒泡 事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流主要分为两种,即事件捕获和事 ...

  6. 02.Windows2012R2安装360安全卫士失败及无法卸载问题

    问题: Windows 2012 R2 安装360安全卫士失败及无法卸载,导致网络无法通信问题解决. 解决:1.进入 Windows2012R2 安全模式下:2.进行覆盖安装360安全卫士:3.覆盖安 ...

  7. Read-Only Tables 只读表

    Put  a table into read-only  mode,which prevents DDL or DML changes during table maintenance Put the ...

  8. leetcode 实现-168.Excel表列名称

    168.Excel表列名称 描述 给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如, 1 -> A 2 -> B 3 -> C … 26 -> Z 27 -&g ...

  9. Mongodb副本集实现及读写分离

    前言 地址:https://blog.csdn.net/majinggogogo/article/details/51586409 作者介绍了,mongodb副本集的读写原理,原理是通过代码层来实现. ...

  10. python进阶:装饰器

    1.闭包 简单理解:闭包就是多层函数的嵌套,外层函数的返回值是内层函数的引用. def out_func(n): num = 100 def in_fucn(*args,**kwargs): # no ...