个人理解:
是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参;

Slot的通俗理解

是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容;

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

<template>

<div>

<slot></slot>

<slot  style=”color:blue;” >这是在slot上添加了样式</slot>

<slot  name=”mySlot”>这是拥有命名的slot的默认内容</slot>

</div>

</template>

会输出:两个红色的hello world,以及一个使用slot的默认内容

注意:在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换,会显示slot的默认值(具名slot具有对应性);

2、组件中有多个命名的slot插槽时,可以实现父组件对子组件的指定位置显示内容或传参,如下:

<Child>

<span slot="header">hello world</span>

<span slot="main">hello world</span>

<span slot="footer">hello world</span>

<span slot="other">{{otherData}}</span>

</Child>

<template>

<div>

<slot  name=”header”>这是拥有命名的slot的默认内容</slot>

<slot  name=”main”>这是拥有命名的slot的默认内容</slot>

<slot  name=”footer”>这是拥有命名的slot的默认内容</slot>

<slot  name=”other”>这是拥有命名的slot的默认内容</slot>

</div>

</template>

3、作用域插槽!!:
使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签,再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据,所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的去问题;

作用域插槽代表性的用例是列表组件,允许在parent父组件上对列表项进行自定义显示,如下该items的所有列表项都可以通过slot定义后传递给父组件使用,也就是说数据是相同的,不同的场景页面可以有不同的展示方式:

<ul>

<slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >

slot的默认内容

</slot>

</ul>

<Child>

<template slot="item" scope="props">

<li>{{props.myname}}</li>

</template>

</Child>

Vue中的slot的更多相关文章

  1. vue中的slot与slot-scope

    深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解

  2. vue中的slot理解和使用

    最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue ...

  3. Vue中的slot(占坑,预留位置)

    Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...

  4. vue 中的slot属性(插槽)的使用

    总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...

  5. vue中的slot(插槽)

    vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...

  6. 深入理解vue中的slot与slot-scope

    from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...

  7. Vue中的slot内容分发

    ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...

  8. Vue中插槽slot的使用

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

  9. vue中的slot插槽

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

随机推荐

  1. CSS3 zoom 属性

    zoom:normal | <number> | <percentage> 默认值:normal normal: 使用对象的实际尺寸. <number>: 用浮点数 ...

  2. servlet 如何处理多请求访问以及线程讲解

    servlet 如何处理多请求访问以及线程讲解 场景:js循环500次请求同一个后台接口,接口内部逻辑:1.查询商品数量,2.扣减商品数量 ,那么该接口是否需要考虑多线程并发安全问题? 分析: 1.先 ...

  3. Module parse failed: Export 'instance' is not defined (35:19)

    Module parse failed: Export 'instance' is not defined (35:19) 使用npm出现的这错误,用yarn就可以了 这种情况rm node_modu ...

  4. Linux 目录共享

    ## 安装 nfs 和 rpc yum install -y nfs-utils rpcbind ## ubuntu 安装 nfs 和 rpc ## apt-get install nfs-kerne ...

  5. Jmeter接口测试之用例数据分离

    之前我们的用例数据都是配置在 Jmeter Http 请求中,每次需要增加,修改用例都需要打开 jmeter 重新编辑,当用例越来越多的时候,用例维护起来就越来越麻烦,有没有好的方法来解决这种情况呢? ...

  6. Bootloader - Main system - Recovery的三角关系

    原文地址:http://blog.csdn.net/myarrow/article/details/8115610 一.MTD分区:BOOT:        boot.img,Linux kernel ...

  7. python 多线程实现循环打印 abc

    python 多线程实现循环打印 abc 好久没写过python了, 想自己实践一下把 非阻塞版 import threading import time def print_a(): global ...

  8. Spring——5种增强方式

    一.前置增强 二.后置增强 三.环绕增强  环绕增强相当于前置增强和后置增强的结合体,可以使用<aop:around>进行处理,这里我采用代理工厂的方式 1.接口及其实现类 public ...

  9. 'findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件

    今天通过windows cmd客户端输入: solr.cmd start ,启动solr时,提示"findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件" 这是PAT ...

  10. PHP处理kafka消息队列

    在安装php-kafka 扩展后,就可以开始编写 php 消费消息的脚本了,php-rdkafka 扩展提供了几种消息处理的方式 低级方式(Low level) 这种方式没有消费组的概念 <?p ...