一.插槽是个什么玩意,能吃吗

  • 在vue中【插槽】,从字面意思来看,插槽意味着【内容的增加】,回到vue的使用场景,插槽就是【父组件调用子组件时,额外增加的内容】。
  • 插槽显不显示、显示的内容是由父组件来控制的,而插槽在哪里显示由子组件来决定

二.插槽怎么用,好用吗

1.默认插槽

父组件

 <template>
<div>
父组件的内容
<slot1>
<p style="color:red">父组件中插槽内容</p>
</slot1>
</div>
</template>

子组件

<template>
<div>
<div>slot1子组件</div>
<slot></slot>
</div>
</template>
<script>

效果

从上面可以看出,父组件引用子组件标签里的内容被加在了子组件<slot>标签中。slot就是一个插槽,当父组件调用子组件时,父组件的内容被插入到子组件相应的位置中了。

2.具名插槽

顾名思义,就是有具体名字的插槽,子组件中与父组件相对应名字的内容将添加。

3.作用域插槽

  父组件

<template>
<div>
作用域插槽父组件
<slot2>
<template slot-scope="user">
<div v-for="(item, index) in user.data" :key="index">
<span>姓名:{{item.name}}</span>;
<span>年龄:{{item.age}}</span>
</div>
</template>
</slot2>
</div>
</template>
<script>
import slot2 from "./slot2"
export default {
name: 'main',
components: {
slot2
}
}
</script>
<style scoped>
</style>

  子组件

<template>
<div>
作用域插槽的子组件
<slot :data="user"></slot>
</div>
</template> <script>
export default {
name: 'slot2',
data () {
return {
user: [
{name: '王五', age: '23'},
{name: '李二', age: '45'},
{name: '张三', age: '15'}
]
}
}
}
</script>

  效果

  父组件使用slot-scope接收来自子组件传过来的参数。

  使用场景:如果子组件中的某一部分的数据,每个父组件都会有自己的一套对该数据的不同的呈现方式,这时就需要用到作用域插槽

vue解惑之slot(插槽)的更多相关文章

  1. vue中的slot插槽

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

  2. 8.Vue组件三---slot插槽

    主要内容:  1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...

  3. Vue系列:Slot 插槽的使用范例

    插槽对于自定义的组件开发来说,是十分强大的功能.这篇主要做个简单梳理 插槽可以分3种: 1.简单插槽 2.具名插槽 3.作用域插槽

  4. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  5. Vue slot插槽

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

  6. Vue slot插槽内容分发

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

  7. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  8. Vue 之 slot(插槽)

    前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧 ...

  9. Vue(14)slot插槽的使用

    为什么使用slot slot(插槽) 在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘,手机,鼠标,键 ...

随机推荐

  1. 关于Go defer的详细使用

    先抛砖引玉defer的延迟调用:defer特性: . 关键字 defer 用于注册延迟调用. . 这些调用直到 return 前才被执.因此,可以用来做资源清理. . 多个defer语句,按先进后出的 ...

  2. php-fpm的pool、php-fpm慢执行日志、open_basedir、php-fpm进程管理

    6月13日任务 12.21 php-fpm的pool12.22 php-fpm慢执行日志12.23 open_basedir12.24 php-fpm进程管理 12.21 php-fpm的pool p ...

  3. Tomcat介绍、安装JDK、安装Tomcat

    6月26日任务 16.1 Tomcat介绍16.2 安装jdk16.3 安装Tomcat扩展java容器比较 http://my.oschina.net/diedai/blog/271367 http ...

  4. 生活小插曲(长篇连载,持续更新ing)^_^

    这个帖子,长期记录一些小小的生活插曲 在北京朋友开店了-关于同学开快餐店的故事.今天下午听说这个朋友在附近开了一个店,下午5点多吧,出门去他那里去了.走路过去的.在那里聊了将近一个小时吧.对最近我们自 ...

  5. docker-primary

    docker-ce  docker网址 https://docs.docker.com/docsarchive/ Docker的安装和启动 官方安装文档链接:https://docs.docker.c ...

  6. shell脚本sed awk

    删除第一行 sed '1d' test.txt 假装执行 sed -i '1d' test.txt 执行 从第二行删除到行尾 sed '2,$d' test.txt sed -i '2,$d' tes ...

  7. pom父工程dependencyManagement中的jar包在子工程中不写版本号无法引入的问题

    1.遇到的问题:  本人用的idea,然后在导入别人的项目的时候,pom文件中没有报错了,但是在maven栏目中jar包却一直报红,是因为我没写版本的原因吗?不对呀,我的父工程下已经写了springb ...

  8. redis数据类型--hash

    /** Redis应用之Hash数据类型* 问题1:操作命令* 问题2:存储实现原理和数据结构* 问题3:应用场景* */ 先了解下什么是hash,什么是hash碰撞:hash:是包含键值对的kv的数 ...

  9. Python文件头注释的含义,你肯定不懂

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:冰火梦幻  本文档描述了Python语言文件头里典型注释的含义. 1. ...

  10. 【python3】Python十行代码搞定文字转语音

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:万能搜吧 都是copy的百度SDK文档,简单说说怎么用. 1.没安装Py ...