slot的意思是插槽,想想你的电脑主板上的各种插槽,有插CPU的,有插显卡的,有插内存的,有插硬盘的,所以假设有个组件是computer,其模板是

<template>
  <div>
  <slot name="CPU">这儿插你的CPU</slot>
  <slot name="GPU">这儿插你的显卡</slot>
  <slot name="Memory">这儿插你的内存</slot>
  <slot name="Hard-drive">这儿插你的硬盘</slot>
  </div>
</template>

那么你要攒一个牛逼轰轰的电脑,就可以这么写:

<template>
<computer>
<div slot="CPU">Intel Core i7</div>
<div slot="GPU">GTX980Ti</div>
<div slot="Memory">Kingston 32G</div>
<div slot="Hard-drive">Samsung SSD 1T</divt>
</computer>
</template>

简单理解vue的slot插槽的更多相关文章

  1. Vue 之 slot(插槽)

    前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧 ...

  2. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  3. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  4. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  5. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  6. vue中slot插槽

    插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...

  7. vue 之 slot插槽

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

  8. Vue中slot插槽的使用

  9. Vue slot插槽

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

随机推荐

  1. Comet Contest#11 F arewell(DAG计数+FWT子集卷积)

    传送门. 题解: 4月YY集训时做过DAG计数,和这个基本上是一样的,但是当时好像直接暴力子集卷积,不然我省选时不至于不会,这个就多了个边不选的概率和子集卷积. DAG计数是个套路来的,利用的是DAG ...

  2. Confluence 6 站点备份和恢复

    Atlassian 推荐针对生产环境中安装使用的 Confluence 使用原始数据库工具备份策略. 在默认的情况下,Confluence 每天都会备份所有数据和附件到 XML 文件备份中.这些文件被 ...

  3. vue中的toast组件

    首先在components新建组件文件夹 随后在toast.vue中写入弹框样式 <template> <transition name="demo"> & ...

  4. mybatis的核心对象图解

  5. mongodb副本集的内部机制(借鉴lanceyan.com)

    针对mongodb的内部机制提出以下几个引导性的问题: 副本集故障转移,主节点是如何选举的?能否手动干涉下架某一台主节点. 官方说副本集数量最好是奇数,为什么? mongodb副本集是如何同步的?如果 ...

  6. psql内部命令及对应sql语句

    \?: 查看所有帮助  \l: 查看所有数据库  SELECT d.datname as "Name",       pg_catalog.pg_get_userbyid(d.da ...

  7. STM32时钟初始化函数SystemInit()详解【转】

    花了一天的时间,总算是了解了SystemInit()函数实现了哪些功能,初学STM32,,现记录如下(有理解错误的地方还请大侠指出): 使用的是3.5的库,用的是STM32F107VC,开发环境RVM ...

  8. js基础关系运算符

    js基础关系运算符 == 是否相等(只检查值) x=5,y='-5';x==y true === 是否全等(检查值和数据类型) x=5,y='-5';x===y false != 是否不等于 5!=8 ...

  9. Redis启动Sentinel出现警告的解决

    Redis 3.0.7版本启动时出现警告的解决办法 7283:M 12 Mar 12:13:33.749 # WARNING: The TCP backlog setting of 511 canno ...

  10. java有序列表

    关于有序和无序的定义: 有序:有序列表中的元素具有某种内在的关联,这种关联定义了列表之间的顺序 无序:无序列表中的元素按使用者所选择得任意方式排序 索引:索引列表为他的元素维护一段连续的数字索引值 有 ...