Vue 之 slot(插槽)
前言:
vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了vue的说明文档。
实际上,插槽的概念很简单,下面通过分三部分来讲。这三部分也是按照vue说明文档的顺序来写的。
进入这三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示。
由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。 非插槽模板指的是html模板,比如‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定,slot写在组件template的什么位置,父组件传过来的模板将来就显示在什么位置。
一、理解vue中的slot
官网上对slot的理解是:
“Vue实现了一套内容分发的API,这套API基于当前的Web Components规范草案,将slot元素作为承载分发内容的接口”。
在参考了很多资料之后,以下总结一下我对slot的理解: slot的意思是插槽,Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。 在我们的电脑主板上也有各种各样的插槽,有插CPU的,有插显卡的,有插内存的,有插硬盘的。我们可以理解slot为要占出当前的位置,方便我们插入内容。或者可以这样理解:要去吃饭了,儿子先去占座,然后等他爸爸来了再一起吃。 Vue的插槽分为匿名插槽(单个插槽/默认插槽)、具名插槽、作用域插槽(带数据的插槽)。 ####匿名插槽(单个插槽/默认插槽)
- 无name属性
- 在组件中只可以使用一次
- 父组件提供样式和内容
<!-- 父组件-->
<template>
<div class="father">
<h3>这里是父组件</h3>
<chlid>
<div class="tmp1">
<span>Leaf 1</span>
<span>Leaf 2</span>
<span>Leaf 3</span>
<span>Leaf 4</span>
<span>Leaf 5</span>
</div>
</child>
</div>
</template>
<script>
import Child from '@/components/child'
export default {
components:{
child:child
}
}
</script>
<style>
.tmp1 span{
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
复制代码
<!--子组件-->
<template>
<div>
<slot></slot>
<h2>child子组件部分</h2>
</div>
</template>
复制代码
最终呈现效果:
如果改变子组件中的位置:
<template>
<div>
<h2>child子组件部分</h2>
<slot></slot>
</div>
</template>
复制代码
改变slot位置后的最终呈现效果如下:
只有在父组件的child下写了html模板,才能在子组件指定的位置放父组件的内容。插槽最后显示不显示是看父组件有没有在child下写模板,像下面一样:
<child>
html模板
</child>
复制代码
####具名插槽
- 有name属性
- 在组件中可以使用N次
- 父组件通过html模板上的slot属性关联具名插槽
- 没有slot属性的html模板默认关联匿名模板
- 父组件提供样式和内容
<!--父组件-->
<template>
<div class="father">
<h3>这里是父组件</h3>
<chlid>
<div class="tmp1" slot="up">
<span>Leaf 1</span>
<span>Leaf 2</span>
<span>Leaf 3</span>
<span>Leaf 4</span>
<span>Leaf 5</span>
</div>
<div class="tmp1" slot="down">
<span>Leaf 6</span>
<span>Leaf 7</span>
<span>Leaf 8</span>
<span>Leaf 9</span>
<span>Leaf 10</span>
</div>
</child>
</div>
</template>
<script>
import Child from '@/components/child'
export default {
components:{
child:child
}
}
</script>
<style>
.tmp1 span{
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
复制代码
<!--子组件-->
<template>
<div>
<slot name="up"></slot>
<h2>chlid子组件部分</h2>
<slot name="down"></slot>
</div>
</template>
复制代码
最终呈现效果:
####作用域插槽(带数据的插槽)
- 父组件只提供样式,子组件提供内容
- 在slot上面绑定数据
- 子组件的值可以传给父组件使用
- 父组件展示子组件数据有3种方式:flex显示、列表显示、直接显示
- 使用slot-scope必须使用template
- scope返回的值是slot标签上返回的所有属性值,并且是一个对象的形式保存起来
- slot有两个属性,一个row,另一个是index
<!--父组件-->
<template>
<div class="father">
<h3>这里是父组件</h3>
<chlid>
<!-- 第一次使用:用flex展示数据 -->
<template slot-scope="user">
<div class="tmp1">
<span v-for="(item,index) in user.data" :key="index">{{item}}</span>
</div>
</template>
<!-- 第二次使用:用列表展示数据 -->
<template slot-scope="user">
<ul>
<li v-for="(item,index) in user.data" :key="index">{{item}}</li>
</ul>
</template>
<!-- 第三次使用:直接显示 -->
<template slot-scope="user">
{{user.data}}
</template>
</child>
</div>
</template>
<script>
import Child from '@/components/child'
export default {
components:{
child:child
}
}
</script>
<style>
.tmp1 span{
width: 50px;
height: 50px;
border: 1px solid black;
}
</style>
复制代码
<!--子组件-->
<template>
<div>
<h2>chlid子组件部分</h2>
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
props: ["message"],
data () {
return {
data: [''小庄','CC','小张','小林','Leaf','Bob']
}
}
}
</script>
复制代码
通过3种方式显示数据的最终呈现效果分别如下: 1、flex显示
2、列表显示
3、直接显示
这里我们所看到的数据“'小庄','CC','小张','小林','Leaf','Bob'”都是子组件data提供的数据,父组件如果要使用这些数据必须要通过template模板结合slot-scope来呈现。
这里只是将自己学到的知识做一个总结,方便自己记忆和查阅,可能会有错,望大神指点!
作者:Leaf_hyc
链接:https://juejin.im/post/5c83aa1b5188257ddb6af526
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Vue 之 slot(插槽)的更多相关文章
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- vue中slot插槽
插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...
- 简单理解vue的slot插槽
slot的意思是插槽,想想你的电脑主板上的各种插槽,有插CPU的,有插显卡的,有插内存的,有插硬盘的,所以假设有个组件是computer,其模板是 <template> <div&g ...
- vue 之 slot插槽
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,父组件决定插槽显示或不显示以及怎样显示,子组件决定 ...
- Vue中slot插槽的使用
- Vue slot插槽
插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...
- Vue slot插槽内容分发
slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
- vue解惑之slot(插槽)
一.插槽是个什么玩意,能吃吗 在vue中[插槽],从字面意思来看,插槽意味着[内容的增加],回到vue的使用场景,插槽就是[父组件调用子组件时,额外增加的内容]. 插槽显不显示.显示的内容是由父组件来 ...
随机推荐
- 任务调度之Quartz.Net基础
最近公司要求将之前的系统设计文档补上,于是大家就都被分配了不同的任务,紧锣密鼓的写起了文档来.发现之前项目中使用了Quartz.Net来做一些定时任务的调度,比如定时的删除未支付的订单,定时检查支付状 ...
- linux 给运行程序指定动态库路径
1. 连接和运行时库文件搜索路径到设置 库文件在连接(静态库和共享 库)和运行(仅限于使用共享库的程序)时被使用,其搜索路径是在系统中进行设置的.一般 Linux 系统把 /lib 和 /usr/li ...
- [转帖]负载均衡 LVS+Keepalived
负载均衡 LVS+Keepalived https://www.cnblogs.com/jicki/p/5546862.html 改天试试 一直没搞过. 系统 CentOS 5.6 X64 物理机 ...
- MySQL索引工作原理
为什么需要索引(Why is it needed)?当数据保存在磁盘类存储介质上时,它是作为数据块存放.这些数据块是被当作一个整体来访问的,这样可以保证操作的原子性.硬盘数据块存储结构类似于链表,都包 ...
- Vue $emit $event 传值(子to父)
事件名 始终使用 kebab-case 的事件名. 通过事件向父组件发送信息 子组件中EnFontsize.vue中$emit <button @click="$emit('enlar ...
- C# EF 加密连接数据库连接字符串
不多说,直接上代码 public partial class Model1 : DbContext { private static string connStr = ""; pu ...
- mvc伪静态
方法一:IIS配置伪静态 方法二:项目配置伪静态 网站配置文件Web.config <system.webServer> <handlers> <add name=&qu ...
- C#倒计时关闭提示框
前两天实现某个功能需要做一个提示框 并且能够自动关闭的,就从网上搜了一个能够自动关闭的提示框 ,但由于我需要的场景是不确定计时时间的,所以并没有使用到该窗体,但是我觉得可以留存备用 ,后边也把我 这种 ...
- 目标进程已退出,但未引发 CoreCLR 启动事件
目标进程已退出,但未引发 CoreCLR 启动事件.请确保将目标进程配置为使用 .NET Core.如果目标进程未运行 .NET Core,则发生这种情况并不意外 解决:更新SDK版本
- sql 防注入(更新问题)
一下这条语句虽然不会是数据表中的数据发生变化,但是会对数据库主从造成影响 update `article` where `article_id` = '40&n974742=v995656' ...