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. 单机版ZooKeeper的安装教程

    之前一直没有时间去整理,现在抽出几分钟时间整理以下,有问题的在评论区留言即可. 前期准备JDK环境(ZK需要jdk进行编译,本文以jdk1.8.0_211为例).Linux系统(本文以Centos7为 ...

  2. Win服务程序编写以及安装一般步骤

    Win服务程序编写以及安装一般步骤 Windows服务的优点有:1. 能够自动运行.2. 不要求用户交互.3. 在后台运行.本文将介绍常见服务程序编写的一般步骤以及注意事项. 设计服务程序实例: 创建 ...

  3. 从原理层面掌握@ModelAttribute的使用(使用篇)【一起学Spring MVC】

    每篇一句 每个人都应该想清楚这个问题:你是祖师爷赏饭吃的,还是靠老天爷赏饭吃的 前言 上篇文章 描绘了@ModelAttribute的核心原理,这篇聚焦在场景使用上,演示@ModelAttribute ...

  4. Docker入门-搭建docker私有仓库

    Docker Hub 目前Docker官方维护了一个公共仓库Docker Hub,其中已经包括了数量超过15000个镜像.大部分需求都可以通过在Docker Hub中直接下载镜像来使用. 注册登录 可 ...

  5. Microsoft Access数据库操作类(C#)

    博文介绍的Microsoft Access数据库操作类是C#语言的,可实现对Microsoft Access数据库的增删改查询等操作.并且该操作类可实现对图片的存储,博文的最后附上如何将Image图片 ...

  6. 用gcc/g++编译winsock程序

    用gcc/g++编译winsock程序 D:\My\code>gcc -o getweb.exe getweb.c -lwin32socket 如果不加此句 -lwin32socket 编译会报 ...

  7. 「雕爷学编程」Arduino动手做(15)——手指侦测心跳模块

    37款传感器和模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器与模块,依照实践出真知(动手试试)的理念,以学习和交流为目的,这里准备 ...

  8. SpringBoot电商项目实战 — Redis实现分布式锁

    最近有小伙伴发消息说,在Springboot系列文第二篇,zookeeper是不是漏掉了?关于这个问题,其实我在写第二篇的时候已经考虑过,但基于本次系列文章是实战练习,在项目里你能看到Zookeepe ...

  9. ASP.NET Core Web API

    1.简单介绍 ASP.NET Core Web API 是 ASP.NET Core MVC 的一个功能.ASP.NET Core MVC 包含了对 Web API 的支持.可以构建多种客户端的 HT ...

  10. java表达式

    JAVA表达式优先级: (如果表达式复杂可直接括号处理) 资源来自尚学堂java视频