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. oracle常规使用(一)

    目录 特殊sql distinct 项目中遇到表中无主键,但是某个字段不能重复. 需要匹配id串里的内容 批量更新,但是批量成功返回的是-1 时间格式化 行列互转 应用场景 列转行 总结 oracle ...

  2. Mybatis学习笔记之---多表查询(1)

    Mybatis多表查询(1) (一)举例(用户和账户) 一个用户可以有多个账户 一个账户只能属于一个用户(多个账户也可以属于同一个用户) (二)步骤 1.建立两张表:用户表,账户表,让用户表和账户表之 ...

  3. Throughput Controller

    吞吐量控制器(Throughput Controller)介绍 作用:控制其子节点的执行次数与负载比例分配 Total Executions: 整个测试计划中的总执行次数 Percent Execut ...

  4. wordpress修改登录密码

    wordpress忘记密码更改 网上搜到的方法: 1.后台邮件重置: 2,phpmyadmin登录数据库,执行mysql语句或者在wp_users表中重置密码: 3,利用php文件重置. 这是提供一种 ...

  5. Element-UI 表单验证规则rules 配置参数说明

    官方文档 : https://github.com/yiminghe/async-validator

  6. Unity进阶之ET网络游戏开发框架 06-游客登录

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  7. appiumstudio工具-----实现windows上安卓、IOS自动化测试

    博主用的是win10,用python+appium做完安卓的自动化第一个版本后,大量地搜索windows上做IOS自动化的解决办法,有的建议用虚拟机,安装苹果的系统,没有实践过,据说效果不很好.然后, ...

  8. Springboot源码分析之番外篇

    摘要: 大家都知道注解是实现了java.lang.annotation.Annotation接口,眼见为实,耳听为虚,有时候眼见也不一定是真实的. /** * The common interface ...

  9. function template

    /* function template programmer:qpz */ #include <iostream> using namespace std; template <c ...

  10. 关于Picasso加载图片Callback不执行问题

    关于Picasso加载图片Callback不执行问题 问题背景 代码大致如下,Target或Callback的回调有时候不执行. https://github.com/square/picasso/i ...