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

  • 在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. JDK1.8新特性(一):stream

    一.什么是stream? 1.概述 Java 8 API添加了一个新的抽象称为流Stream,可以让你以一种声明的方式处理数据. 这种风格将要处理的元素集合看作一种流, 流在管道中传输, 并且可以在管 ...

  2. 全网最通俗易懂的Kafka入门!

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在这篇之前已经写过两篇基础文章了,强烈建议先去阅读: ...

  3. No provider available for the service com.xxx.xxx 错误解决

    HTTP Status 500 - Servlet.init() for servlet springmvc threw exception type Exception report message ...

  4. python check excel 文件

    Use pip install openpyxl first Every simple example import openpyxl # 打开excel文件,获取工作簿对象 wb = openpyx ...

  5. 生成n个随机数,要求n个数的和等于100

    // 生成n个随机数,要求n个数的和等于100 function lessANumber(n, v) { var i, s = 0, r = [], x = v; for (i = 1; i < ...

  6. java多线程与线程池

    1. 场景描述 以前多线程也常用,这次因需再页面上用到多线程,如下图,总结下,有需要的朋友可以参考下. 2. 解决方案 2.1 线程池概念 线程池官方定义不说了,通俗说下:池子的概念,事先(预定义)创 ...

  7. 【立即报名】解码AI大杀器:华为云GPU+Tensorflow 容器实战

    导语: 人工智能的火热,带来了一波学习TensorFlow深度学习框架的热潮.聊深度学习免不了要用GPU,但目前GPU费用较高,对于个人学习者和创业公司来讲的话,按需配置的云GPU服务器是一个不错的选 ...

  8. SpringBoot使用注解(@value)读取properties(yml)文件中 配置信息

    为了简化读取properties文件中的配置值,spring支持@value注解的方式来获取,这种方式大大简化了项目配置,提高业务中的灵活性. 1. 两种使用方法1)@Value("#{co ...

  9. redis数据类型--zset

    数据结构: zset是有序的,不运行重复的,带有分值score的 数据结构对比: 操作命令: zadd myzset 10 java 20 python 20 ruby 40 mysql 50 php ...

  10. IO到NIO的一个转变

    本内容来源:Jack视频讲解和自己的一个理解. 1.故事还得从网络模型或者IO开始聊起 2.你有想过传统IO真正存在的问题吗? 3.如果你是设计者,IO可以怎样改进? 4.NIO原理分析以及代码实现 ...