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

  1. 子模板不使用slot
  2. 子模板使用slot
  3. 子模板使用使用name属性,且传递data
  • 文件名:Slots.vue
//slot组件
<template>
  <div class="Slots">
      <div class="myd">
      在子组件中不使用slot时SlotChildwithnoslots下的内容不会显示
      <SlotChildwithnoslots>         
          <div class="no-name">111111111111111111我是嵌在子组件内不具有属性名的标签</div>
          <div >2222222222222222222222222222我是嵌在子组件内不具有属性名的标签</div>
      </SlotChildwithnoslots>
    </div>
      '
      '
      '
      '
      '
      '
      '
      <div class="myd">'
      在子组件中使用slot时SlotChildwithslots下的内容会显示
       <SlotChildwithslots>         
          <div class="no-name">111111111111111111我是嵌在子组件内不具有属性名的标签</div>
          <div >2222222222222222222222222222我是嵌在子组件内不具有属性名的标签</div>
      </SlotChildwithslots>
      </div>  
        '
      '
      '
      '
      '
      '
      '.
       <div class="myd">'
      在子组件中使用slot时且包含数据时下的内容会显示
       <SlotChildwithslotsanddata>         
          <div slot="header">111111111111111111我是嵌在子组件内不具有属性名的标签</div>
          <div slot="header">2222222222222222222222222222我是嵌在子组件内不具有属性名的标签</div>
          <template slot-scope="user">
                <div v-for="item in user.data" :key="item.id">
                {{item}}
                </div>
            </template>
      </SlotChildwithslotsanddata>
      </div>  
       
  </div>
</template>
<script>
import SlotChildwithnoslots from '@/components/SlotChildwithnoslots'
import SlotChildwithslots from '@/components/SlotChildwithslots'
import SlotChildwithslotsanddata from '@/components/SlotChildwithslotsanddata'
export default {
    name: 'Slots',
    components:{
        SlotChildwithnoslots,
        SlotChildwithslots,
        SlotChildwithslotsanddata
    },
    data () {
        return {
      
        }
    }
}
</script>
<style>
.myd
background-color:yellow;
height: 300px;
border:1px solid red;
}
</style>
 
  • 文件名:SlotChildwithslots.vue
//slot的子组件
<template>
<div class="SlotChildwithslots">
<slot></slot>
我是slot的子组件
</div>
</template> <script>
export default {
name: 'SlotChildwithslots',
data () {
return { }
}
}
</script>
  • 文件名:SlotChildwithnoslots.vue
//slot的子组件
<template>
<div class="SlotChildwithnoslots">
我是slot的子组件
</div>
</template> <script>
export default {
name: 'SlotChildwithnoslots',
data () {
return { }
}
}
</script>
  • 文件名:SlotChildwithslotsanddata.vue
//slot的子组件
<template>
<div class="SlotChildwithslotsanddata">
<slot name="header" ></slot> 我是slot的子组件
<slot :data="user"></slot>
</div>
</template> <script>
export default {
name: 'SlotChildwithslotsanddata',
data () {
return {
user: [
{name: 'Jack', sex: 'boy'},
{name: 'Jone', sex: 'girl'},
{name: 'Tom', sex: 'boy'}
]
}
}
}
</script>
 

Vue中的slot(占坑,预留位置)的更多相关文章

  1. 记录vue中一些有意思的坑

    记录vue中一些有意思的坑 'message' handler took 401ms 在出现这个之前,我一直纠结于 是如何使用vue-router或者不使用它,通过类似的v-if来实现.结果却出现这个 ...

  2. vue中的slot与slot-scope

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

  3. vue中的slot理解和使用

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

  4. Vue中的slot

    个人理解:是对组件的扩展,通过slot插槽向组件内部指定位置传递内容,通过slot可以父子传参: Slot的通俗理解 是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自 ...

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

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

  6. vue中的slot(插槽)

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

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

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

  8. 如何使用Vue中的slot

    之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为 是要往下派发内容.然后就没有理解插槽的概念.其实说白了,使用slot就是先圈一块地,将来可能种花种 ...

  9. Vue中的slot内容分发

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

随机推荐

  1. android ——活动的生命周期

    在其生命周期内,activity在运行.暂停和停止三种可能的状态间进行转换,不同状态之间互相转换的时候的调用不同的方法,重写这些方法就能在活动切换,被销毁时保存或传输数据,在被启动.被切换出来时接收数 ...

  2. Zookeeper_阅读源码第一步_在 IDE 里启动 zkServer(单机版)

    Zookeeper是开源的,如果想多了解Zookeeper或看它的源码,最好是能找到它的源码并在 IDE 里启动,可以debug看它咋执行的,能够帮助你理解其原理. 准备源码 所以我们很容易搞到它的源 ...

  3. Java初学心得(一)

    Java中基本组成单元是类,在类中又包含属性和方法. 每个应用程序都包含一个main()方法,main方法里的称为主类. 一,基本变化 ①全局变量:在类中的属性 局部变量:在方法中的属性 ②基本数据类 ...

  4. Jvm内存泄漏

    内存泄漏和内存溢出的关系 内存泄露:指程序中动态分配内存给一些临时对象,但是对象不会被GC所回收,它始终占用内存.即被分配的对象可达但已无用. 内存溢出:指程序运行过程中无法申请到足够的内存而导致的一 ...

  5. 谨慎 mongodb 关于数字操作可能导致类型及精度变化

    1.问题描述 最近有一个需求,更新Mongo数据库中 原料 集合的某字段价格,更新后,程序报错了,说长度过长了,需要Truncation. 主要错误信息如下: FormatException: An ...

  6. Java String引起的常量池、String类型传参、“==”、“equals”、“hashCode”问题 细节分析

    在学习javase的过程中,总是会遇到关于String的各种细节问题,而这些问题往往会出现在Java攻城狮面试中,今天想写一篇随笔,简单记录下我的一些想法.话不多说,直接进入正题. 1.String常 ...

  7. JMM内存模型详解(一)

    本文开始死磕JMM(Java内存模型)由于知识点较多,分来写 该文为JMM第一篇 技术往往是枯燥的,本文文字较多 1. JMM是什么? 其实JMM很好理解,我简单的解释一下,在Java多线程中我们经常 ...

  8. activemq的下载与安装

    一.介绍 Apache ActiveMQ™是最流行的开源,多协议,基于Java的消息服务器.它支持行业标准协议,因此用户可以通过广泛的语言和平台获得客户选择的好处.可以使用C,C ++,Python, ...

  9. INSERT: 批量插入结果集方式

    INSERT: 批量插入结果集 insert into table select x,y from A UNION select z,k from B ; insert into table sele ...

  10. Oracle笔记_查询

    1 单条件查询 select -- from -- where 条件 -- = > >= < <= != <> -- 单引号用于数据表示字符串 -- 双引号用于数据 ...