• slot 插槽可以在子组件中为父组件要传递的标签占位置  能够有效的减少代码冗余  使代码更加有逼格

    • 第一个例子
<body>

  <div class="app">

    <child>   //假注释。。。   这里的span标签会替代子组件child中的slot标签  当child标签中没有任何东西的时候 会显示默认值 就是那句话

      <span>hehaha</span>

    </child>

  </div>

</body>

<template id="tpl">

  <div>

    <span>haha</span>

    <slot>当父组件没传值过来 就显示这个</slot>

  </div>

</template>

<script>

  Vue.component('child',{

    template:'#tpl',

  })

  const app = new Vue({

    el:'.app'

  })

</script>
    • 　　第二个例子
    • <body>
      
  <div class="app">
      
    <child>
      
      <div slot="reserved">reserved---保留的</div>
      
      <div slot="ww">ww---帅气的</div>
      
    </child>
      
  </div>
      
</body>
      
<template id="tpl">
      
  <div>
      
    <!-- 原本每一个slot插槽都会显示出 child 标签包裹的所有内容   解决这个问题方式就是具名插槽 给上面每一个div 命名slot 值 然后再 slot  插槽中使用name属性绑定命名  -->
      
      <slot name="reserved">当父组件没传值过来 就显示这个</slot>
      
      <span>haha</span>
      
      <slot name="ww">当父组件没传值过来 就显示这个</slot>
      
  </div>
      
</template>
      
<script>
      
  Vue.component('child',{
      
    template:'#tpl',

  })
      
  const app = new Vue({
      
    el:'.app'
      
  })

      代码中有解释了。。。

  • 作用域插槽
  • 上代码
  • <body>
    
  <div class="app">
    
    <child>
    
      <template slot-scope="props">
    
        <span>{{ props }}</span>
    
      </template>
    
    </child>
    
  </div>
    
</body>
    
<template id="tpl">
    
  <div>
    
    <!-- 子组件做循环或者子组件中部分结构 需要由外部传入的时候使用作用域插槽 -->
    
    <!-- 这里循环的每一项都给ite 然后父组件中接收？？？ -->
    
    <slot v-for="item of list" :ite="item"></slot>
    
  </div>
    
</template>
    
<script>
    
  Vue.component('child',{
    
    template:'#tpl',
    
    data(){
    
      return{
    
        list:[1,2,3,4]
    
      }
    
    }
    
  })
    
  const app = new Vue({
    
    el:'.app'
    
  })
    
</script>

    　　

vue--slot插槽的使用方式的更多相关文章

  1. vue slot 插槽详解

    插槽含义:就是引入子组件后,在插入子组件元素中添加信息或者标签,使得子组件的指定位置插入信息或者标签 插槽有三种:默认插槽.具名插槽.作用域插槽,由于vue2.6.0后对插槽进行修改,但是兼容2.6. ...

  2. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  3. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  4. Vue slot 插槽用法：自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  5. vue slot插槽的使用

    slot插槽的使用场景 父组件向子组件传递dom时会用到插槽   作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定   注:想要修改父组件向子 ...

  6. vue slot插槽的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue slot插槽通俗解释

    slot内容分发是Vue的Api来源 <div id="app"> <my-list> {{msg}} </my-list> </div& ...

  8. vue slot 插槽备忘

    老是记不住插槽咋回事 记录下来备忘 父组件 <tab><template slot="boy" slot-scope="test">{{ ...

  9. vue slot插槽v-show不控制显示隐藏

    vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.

  10. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

随机推荐

  1. IEC62304开发过程框架

    软件开发计划的任务 制定整体软件开发计划 制定设计和开发计划 规划软件开发的工具.标准和方法(Class C) 制定软件集成和集成计划 制定软件验证计划 制定软件风险管理计划 制定配置管理计划 软件需 ...

  2. 利用Java反射实现JavaBean对象相同属性复制并初始化目标对象为空的属性的BeanUtils

    有时遇到将数据传输对象转换成JSON串会将属性值为空的属性去掉,利用Java反射实现JavaBean对象数据传输对象的相同属性复制并初始化数据传输对象属性为空的属性,然后转换成JSON串 packag ...

  3. 有关平台支持的从经典部署模型到 Azure Resource Manager 的迁移的技术深入探讨

    本文将深入探讨如何从 Azure 经典部署模型迁移到 Azure Resource Manager 部署模型. 本文将介绍资源和功能级别的资源,让用户了解 Azure 平台如何在两种部署模型之间迁移资 ...

  4. net 4.0+EF6+Sqlite 使用，安装，打包

    开发 1.因为EF不支持Codefirst,开始可以使用SQL来进行开发. 部署安装 2.然后可以找到SQL转Sqlite工具(http://www.cnblogs.com/walkingp/arch ...

  5. Linux命令--用户管理

    useradd命令 Linux useradd命令用于建立用户帐号. useradd可用来建立用户帐号.帐号建好之后,再用passwd设定帐号的密码．而可用userdel删除帐号.使用useradd指 ...

  6. keepalived安装文档

      安装依赖 su - root yum -y install kernel-devel* yum -y install openssl-* yum -y install popt-devel yum ...

  7. iOS js

    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"idNumber\" ...

  8. BZOJ1049:[HAOI2006]数字序列(DP)

    Description 现在我们有一个长度为n的整数序列A.但是它太不好看了,于是我们希望把它变成一个单调严格上升的序列. 但是不希望改变过多的数,也不希望改变的幅度太大. Input 第一行包含一个 ...

  9. 6、Spring Cloud -熔断器Hystrix

    6.1.什么是Hystrix 在分布式系统中.服务与服务之间的依赖错综复杂,一种不可避免的情况就是某些服务 出现故障,导致依赖于它们的其他服务出现远程调度的线程阻塞.   Hystrix是Netfli ...

  10. HDU 1874畅通工程续（迪杰斯特拉算法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1874 畅通工程续 Time Limit: 3000/1000 MS (Java/Others)     ...