vue中的插槽(slot)
vue中的插槽,指的是子组件中提供给父组件使用的一个占位符,用<slot></slot>标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML、组件等,填充的内容会替换掉子组件的<slot></slot>标签(替换占位符)。
vue中的插槽大致可以分为默认插槽、具名插槽和作用域插槽三种。
默认插槽
默认插槽是最简单的一种插槽,和上面的描述一致,就是通过替换占位符达到在父组件中更改子组件中内容的效果。
在子组件中放置一个占位符(插槽):
<template>
<span>
<span>谁是最可爱的人?</span>
<slot></slot>
</span>
</template> <script>
export default {
name: 'child'
}
</script>
然后在父组件中引用这个子组件,并给这个占位符(插槽)填充内容:
<template>
<div>
<span>今日问答:</span>
<child>
<span>当然是yanggb了</span>
</child>
</div>
</template>
这个时候页面展现的内容就会是【今日问答:谁是最可爱的人?当然是yanggb了】。
在上面的例子中,如果在子组件中没有放置<slot><slot>标签占位符,就不会有【当然是yanggb了】这个答案了,问题永远得不到任何回应,这就是插槽因此而存在的意义。事实上,如果子组件中没有使用插槽,父组件要是需要往子组件中填充模板或者html,基本上是没有其他办法能做到的。
具名插槽
来想象一个这样的场景:在子组件中有两个要替换占位符的地方(两个插槽),这时候父组件如果要将相应的内容填充到相应的插槽中,靠默认插槽是没有办法的,因为没有办法判断相应的内容要填充到哪个插槽中。为了应对这样的场景,具名插槽应运而生。
所谓的具名插槽,其实就是给子组件中的插槽取一个名字,而父组件就可以在引用子组件的时候,根据这个名字对号入座,将相应内容填充到相应的插槽中。
在子组件中放置两个具名插槽:
<template>
<div>
<span>我是第一个插槽</span>
<slot name="yanggb1"></slot>
<span>我是第二个插槽</span>
<slot name="yanggb2"></slot>
</div>
</template> <script>
export default {
name: 'child'
}
</script>
在父组件中引用该子组件,并通过v-slot:[name]的方式将相应的内容填充到相应的插槽中:
<template>
<div>
<span>两个插槽:</span>
<child>
<template v-slot:yanggb1>
<span>yanggb1,</span>
</template>
<template v-slot:yanggb2>
<span>yanggb2</span>
</template>
</child>
</div>
</template>
这时候页面展示的内容就会是【两个插槽:第一个插槽yanggb1,第二个插槽yanggb2】。
使用默认插槽和具名插槽的注意事项
1.如果子组件中存在多个默认插槽,那么父组件中所有指定到默认插槽的填充内容(未指定具名插槽),会全部填充到子组件的每个默认插槽中。
2.即使在父组件中将具名插槽的填充顺序打乱,只要具名插槽的名字对应上了,填充的内容就能被正确渲染到相应的具名插槽中,一个萝卜一个坑。
3.如果子组件中同时存在默认插槽和具名插槽,但是在子组件中找不到父组件中指定的具名插槽,那么该内容会被直接丢弃,而不会被填充到默认插槽中。
作用域插槽
作用域插槽的概念和使用,相比于前面的默认插槽和具名插槽,会比较难于理解和运用。前面的两个插槽强调的是填充占位的【位置】,而作用域插槽强调的则是数据作用的【范围】。
所谓的作用域插槽,其实就是带参数(数据)的插槽,即在子组件的插槽中带入参数(数据)提供给父组件使用,该参数(数据)仅在插槽内有效,父组件可以根据子组件中传过来的插槽参数(数据)对展示内容进行定制。
在子组件中放置一个带参数(数据)的插槽:
<template>
<div>
<span>插槽中的参数值是</span>
<slot :yanggb="yanggb"></slot>
</div>
</template> <script>
export default {
name: 'child',
data() {
return {
yanggb: {
yanggb1: 'yanggb1',
yanggb2: 'yanggb2'
}
}
}
}
</script>
在父组件中引用该子组件,并通过slot-scope来接受子组件的插槽中传过来的参数和使用该数据。
<template>
<div>
<span>作用域插槽:</span>
<child>
<template slot-scope="yanggb">
{{ yanggb.yanggb.yanggb1 }}
</template>
</child>
</div>
</template>
这时候页面展示的内容就会是【作用域插槽:插槽中参数值是yanggb1】。
另外,因为在template的{{}}是支持表达式的,这个时候就可以利用子组件传过来的参数值的不同进行页面内容的定制。
<template>
<div>
<span>作用域插槽:</span>
<child>
<template slot-scope="yanggb">
{{ yanggb.yanggb.yanggb1 || '空值' }}
</template>
</child>
</div>
</template>
这时候,如果子组件中传过来的参数是空值,页面的展示内容就会是【作用域插槽:插槽中参数值是空值】。
作用域插槽的使用场景多种多样,在各种框架中的应用也是十分广泛,比如ElementUI中的对表格的某一行或某一列进行展示内容的定制,就是作用域插槽的一个典型应用场景。
"你在池塘里活得很好,泥鳅很丑但会说喜庆话,癞蛤蟆马虎但很有趣,田螺是个温柔的自闭症,小鲫鱼是你们共同的女神。有一天你听说,江河湖海,哪个都要更大,更好。你跳了出去,遇到了美丽的海豚,雄壮的白鲸,婀娜多姿的热带鱼,的确都是好的。就是偶尔,觉得世界很空,生活很咸。"
vue中的插槽(slot)的更多相关文章
- 在vue中使用插槽 slot
插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...
- vue中的插槽slot
插槽(slot):是组件的一块HTML模板,父组件决定这块模板显不显示以及怎么显示. 位置由子组件自身决定(slot现在组件template的什么位置,父组件传过来的模板将来就显示在什么位置) 匿名插 ...
- vue中的插槽slot理解
本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; v ...
- Vue中的插槽---slot
一:什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 插槽显不显示.怎样显示是由 ...
- vue中具名插槽的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 详解Vue中的插槽
作者: 小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 什么是插槽 在日常的项目 ...
- 第八十九篇:Vue 重学插槽slot
好家伙, 1.什么是插槽? 插槽是vue为组件的封装者提供的能力.允许开发者在封装组件时, 把不确定的,希望由用户指定的部分定义为插槽 我们依然可以把它理解为一个占位符 1.1.插槽的基本用法 试 ...
- vue中$refs、$slot、$nextTick相关的语法
Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 1.$data和$el var data = { a: 1 } var vm = new Vue({ el ...
- vue中的插槽
匿名插槽 // comp1 <div> <slot></slot> </div> // parent <comp>hello</com ...
随机推荐
- 03-Java的基础语法
一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一条狗是一个对象,它的 ...
- jsp页面之间传中文参数显示乱码问题的解决
最近在项目中遇到jsp页面通过url传递参数,出现乱码,但是在本地是正常显示,在服务器上却是乱码,找了好久都没找到解决方法,最终在大神的帮助下解决了这个问题 比如从a.jsp像b.jsp页面传递参数 ...
- 73)PHP,session基本操作
(1)先开启: Session_start(); 也可以通过php.ini配置文件中,自动开启sesssion机制: Session.auto_start; (2)利用$_SESSION来操作数 ...
- MOOC(10)- 获取响应中的cookie
- sql server 数据库连接方式分析、详解
本文链接:https://blog.csdn.net/wang379275614/article/details/7859398 一.OLEDB方式连接Sql身份验证模式:Provider=" ...
- PCIe的事务传输层的处理(TLP)
主要从以下几个方面解决: 1.TLP基本的概念: 2.寻址定位与路由导向 3.请求和响应机制 4.虚拟通道机制 5.数据完整性 6.i/o,memory,configuration,message r ...
- sql 优化之8个尽量
查询语句的优化是SQL效率优化的一个方式,可以通过优化sql语句来尽量使用已有的索引,避免全表扫描,从而提高查询效率.最近在对项目中的一些sql进行优化,总结整理了一些方法. 1.在表中建立索引,优先 ...
- LeetCode Day 6
LeetCode0006 将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" ,指定行数为 3 时,排 ...
- Node.js知识点详解(一)基础部分
转自:http://segmentfault.com/a/1190000000728401 模块 Node.js 提供了exports 和 require 两个对象,其中 exports 是模块公开的 ...
- iphone开发学习之路--基本语法
关键字:Objective-C(以下简称O-C)是C语言的一个超集,也就是C语言的语法O-C都是兼容的,所以为了避免冲突O-C的关键字都是以@符号开始的,比如:@class.@public .@try ...