vue插槽详解

一、插槽内容

一句话:插槽内可以是任意内容。

先看一下下面的代码:声明一个child-component组件,

如果现在我想在<child-component></child-component>内放置一些内容,结果会是怎样?

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>
<child-component>你好</child-component>

输出内容还是在组件中的内容,在 <child-component>内写的内容没起作用。

1.jpg

我们现在给组件增加一个<slot></slot>插槽

我们在<child-component></child-component>内写的"你好"起作用了!!!

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

2.jpg

到现在,我们知道了什么是插槽:

插槽就是Vue实现的一套内容分发的API,将<slot></slot>元素作为承载分发内容的出口。

这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容就会跑到它这里了!

二、具名插槽

具名插槽,就是给这个插槽起个名字

在组件中,我给插槽起个名字,一个名字叫"girl",一个名字叫"boy",还有一个不起名字。

然后再<child-component></child-component>内,slot属性对应的内容都会和组件中name一一对应。

而没有名字的,就是默认插槽!!

<div id="app">
    <child-component>
        <template slot="girl">
            漂亮、美丽、购物、逛街
        </template>
        <template slot="boy">
            帅气、才实
        </template>
        <div>
            我是一类人,
            我是默认的插槽
        </div>
    </child-component>
</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>
            <h4>这个世界不仅有男人和女人</h4>

            <slot name="girl"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot name="boy"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot></slot>
            </div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

3、作用域插槽

之前一直没搞懂作用域插槽到底是什么!!!

说白了就是我在组件上的属性,可以在组件元素内使用!

先看一个最简单的例子!!

我们给<slot></slot>元素上定义一个属性say(随便定义的!),接下来在使用组件child,然后在template元素上添加属性slot-scope!!随便起个名字a

我们把a打印一下发现是 {"say" : "你好"},也就是slot上面的属性和值组成的键值对!!!

这就是作用域插槽!

我可以把组件上的属性/值,在组件元素上使用!!

<div id="app">
    <child>
        <template slot-scope="a">
      <!-- {"say":"你好"} -->

            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        template:`
            <div>
                <slot say="你好"></slot>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

再看一下下面的例子:

<div id="app">
    <child :lists="nameList">
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        props:['lists'],
        template:`
            <div>
                <ul>
                    <li v-for="list in lists">
                        <slot :bbbbb="list"></slot>
                    </li>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{
            nameList:[
            {id:1,name:'孙悟空'},
            {id:2,name:'猪八戒'},
            {id:3,name:'沙和尚'},
            {id:4,name:'唐僧'},
            {id:5,name:'小白龙'},
            ]
        }
    })
</script>

看一下输出结果

3.jpg

Image placeholder
前端答疑
未设置
  71人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Vue.js中的无渲染行为插槽

在本文中我们讨论Vue中的无渲染插槽模式能够帮助解决哪些问题。在Vue.js2.3.0中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生,解决了提供可重用行为和可插入表示的问题。在这里

vue.js插槽是什么?

什么是插槽?插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来

vscode插件 - quokka

什么是quokka?Quokka.js是一个用于快速开发javascript或typescript的开发者工具。它能在你键入代码的时候,实时将运行的值更新或展示在你的IDE上。quokka版本Quo

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

vue路由使用图文详解

传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例

vue中的diff算法详解

1.当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的

vue组件基础用法详解

概述在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例组件是一个自定义元素或称为一个模块,包括所需的模板、逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

03.4. Go 的 http 包详解

前面小节介绍了Go怎么样实现了Web工作模式的一个流程,这一小节,我们将详细地解剖一下http包,看它到底是怎样实现整个过程的。 Go的http有两个核心功能:Conn、ServeMux Conn的g

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 反射的基本使用

PHP反射 今天我要给大家讲解的是PHP当中使用非常普遍的高级操作:反射。反射在当今几乎所有的PHP框架或者工具中都占用非常重要的角色,就比如Laravel的容器,容器对于Laravel架构来说极其重

Redis为什么是单线程、及高并发快的3大原因详解

Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快; 2.redis是单线程的,省去了很多上下文切换线程的时间; 3.redis使用多路复用技术,可以处理并发的连接。非阻塞

Swoft2 配置详解

Swoft2配置详解更多资料请关注swoft系列教程、小白系列教程定期连载基本功能介绍 配置项是只读的,不能动态修改.所以不要尝试着动态修改配置 Swoft2的配置分为两类,环境配置和应用配置。 en

详解 varint 编码原理

什么是Varint编码Varint是一种使用一个或多个字节序列化整数的方法,会把整数编码为变长字节。对于32位整型数据经过Varint编码后需要1~5个字节,小的数字使用1个byte,大的数字使用5个

万字详解Oracle架构、原理、进程,学会世间再无复杂架构

学习是一个循序渐进的过程,从面到点、从宏观到微观,逐步渗透,各个击破,对于Oracle, 怎么样从宏观上来理解呢?先来看一个图,这个图取自于教材,这个图对于从整体上理解ORACLE 的体系结构组件,非

详解 | 阿里怎么做双11全链路压测?

导读:全链路压测是阿里的首创,本文将从工作内容、操作过程、运行总结等多个方向来介绍下阿里内部典型电商活动(如双11准备),以给大家展示一个完整的压测流程,帮助更多的企业和用户更好的完成性能测试。前言关

详解数据服务共享发布

引言:随着云计算、大数据、物联网等技术兴起,数据朝着多样性、高体量、高速度方向发展,如何将海量数据安全、稳定、高效地数据共享出去成为各企业关注的重点。本次微课堂通过普元在数据服务共享平台研发过程中的实

数据库大牛李海翔详解全局读一致性技术

作者简介:李海翔,网名“那海蓝蓝”,腾讯金融云数据库技术专家。中国人民大学信息学院工程硕士企业导师。著有《数据库事务处理的艺术:事务管理和并发访问控制》、《数据库查询优化器的艺术:原理解析与SQL性能

共享内存在不同系统的应用与优劣详解

共享内存是一种使计算机程序能够同时共享内存资源以实现更高性能和更少冗余数据副本的技术。共享系统内存可以在单处理器系统、并行多处理器或集群微处理器上运行。对于分布式系统会有一些差异,但共享内存也可以其上

Oracle数据库不同损坏级别的恢复详解

墨墨导读:在DBA的日常工作中不可避免存在着数据库的损坏,本文将主要介绍Oracle数据库遇到不同损坏级别下的应该采用的恢复方法,供读者在遇到此类情景时,能的找到适合自己的恢复方法,提高工作效率。数据