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. leetcode-162周赛-1255-得分最高的单词集合

    题目描述: 方法:穷举暴力 class Solution: def maxScoreWords(self, words: List[str], letters: List[str], score: L ...

  2. mongodb数据库管道操作

    1.$project(修改文档的结构,可以用来重命名.增加或删除文档中的字段) db.order.aggregate([ { $project:{ rade_no:1, all_price:1} } ...

  3. 【dart学习】-- dart 安装开发环境

    前言 说明下:本人只有window和mac,所以安装实践只有这两种,其他的自行尝试.简介:Dart是谷歌开发的计算机编程语言,后来被Ecma (ECMA-408)认定为标准 [1] .它被用于web. ...

  4. JCF——工具类

  5. NX二次开发-用户自定义资源栏选项卡RegisterActivationCallback

    最近在研究UGOPEN文件夹里的例子,发现从NX10版开始可以用户自定义资源栏选项卡了,NX10以下也可以做,但是需要反编译DLL调内部函数,这个只有高手才会,我是不会弄. 以前看过有人把标准件库做到 ...

  6. 使用python发送163邮件 qq邮箱

    使用python发送163邮件 def send_email(title, content): import smtplib from email.mime.multipart import MIME ...

  7. delphi基础篇之数据类型之二:2.字符串类型

    2.字符串类型 2.1.ShortStringShortString 又称为短字符串(相对的,Ansistring.widestring.unicodestring 称为长字符串),其实质上是一个编译 ...

  8. 您应升级到 MySQL 5.5.0 或更高版本。 phpmyadmin

    最近又折腾LAMP了.从官方下载的phpmyadmin在部署的时候发现 “您应升级到 MySQL 5.5.0 或更高版本”.原因是我安装的mysql数据库版本过低. 解决思路: 1.升级mysql版本 ...

  9. testNG官方文档翻译-2 注解

    这里是一份TestNG中的可用注解及其属性的概述. 一.用于一个TestNG类的信息配置的注解: @BeforeSuite:被BeforeSuite注解的方法将在其所在suite中的所有test运行之 ...

  10. Keepalived 双主虚拟路由配置实例

    Keepalived 双主虚拟路由配置实例 演示前说明: 2台centos7.2 主机:node-00,node-01 VIP1:10.1.38.19预定node-00占有 VIP2:10.1.38. ...