vue---slot,slot-scoped,以及2.6版本之后插槽的用法
slot 插槽 ,是用在组件中,向组件分发内容。它的内容可以包含任何模板代码,包括HTML。
vue 在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot
指令)。它取代了 slot
和 slot-scope
这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中,被废弃的这两个,不会被支持即无效。
在 2.6.0之前,插槽的用法:
1. 匿名插槽。
以 .vue 这种单文件模块为例
//创建 testSlot.vue组件
<template>
<div>
//slot里面也可以设置内容,这个可以设置不传内容时,slot有个默认值替换
<slot>这里面是slot的默认值</slot>
<h3>子组件页面</h3>
</div>
</template> <script>
export default {
props:[],
data:function(){
return {}
}
}
</script> <style>
</style>
//引用testSlot组件
<template>
<div>
<h1>引用testSlot组件的页面</h1>
<testSlot>
{{msg}}
</testSlot>
</div>
</template> <script>
import testSlot from '../components/testSlot' export default{
data () {
return {
msg:'这是动态传入的slot的内容'
}
},
components:{ testSlot }
}
</script> <style>
</style>
结果:
注意事项:
1) 匿名的方式,就是指把在引用组件的时候,里面传的内容,全部一起传送到组件页面中 <slot></slot> 所在的位置。
2) 只要组件中有 <slot></slot> ,并且不管有多少个,都会全部渲染为传过来的内容。
3) <slot></slot>里面也可以设置内容,这个内容是保证引入组件的时候,有个默认值。当然,<slot></slot>里面不设置内容也可以,这样只是没有默认值,是不会报错的。
4) 传递的内容,也可以是动态的,如同上面一样。但是要注意的是,这个内容不能是 引用组件的时候组件上的内容,要注意作用域。可以查看官网 插槽编译作用域。
5) 如果传递的内容,没有slot 来接收,那么,传递的内容就会被抛弃掉,不会起作用。
5) 那这个时候,如果我想某个 <slot></slot> 传指定的 内容呢?那这个时候就需要具名插槽了。
2. 具名插槽,就是给插槽指定名称,然后 一 一对应
//引入组件的页面
<testSlot>
<template slot='header'>
<p>------------header----------------</p>
<h3>这是header1的内容</h3>
<p>这是header2的内容</p>
</template> <template slot='footer'>
<p>------------footer----------------</p>
<h3>这是footer1的内容</h3>
<p>这是footer2的内容</p>
</template> <p>-----------default-----------------</p>
<p>这是default剩下的内容1</p>
<p>这是default剩下的内容2</p>
</testSlot>
//组件当前页面
<slot>---默认内容---</slot>
<h3>slot组件页面</h3>
<slot name='header'>---header的默认内容---</slot>
<slot name='footer'>---footer的默认内容---</slot>
结果:
注意事项:
1) 引入组件的页面,如果是多个内容,需要用template 包裹起来,并且添加 slot 属性和 自定义值 。
2) slot 的值 需要和 组件中 <slot name='xxx'></slot> name的值相对应。
3) 如果剩下的内容没有包裹起来并制定值的话,那么这些内容会被渲染到 组件中 所有的 <slot></slot> 所在的位置。
4) 如果 slot 设置为default 和 name 设置为default,那就和没设置slot与name是一样的。
5) 和vue 2.6.0 以后的具名插槽相比 template上的 slot='xxx' 只需要 改成 v-slot : xxx 就行了,等号改成了冒号,并且值没有引号,带引号反而会报错。
6) 具名插槽只需要 name值 与 slot的值 对应 ,插槽的顺序是没有关系的。
3. slot-scope 作用域插槽。
这个的作用,主要就是当向组件发送的内容需要和组件的props属性的内容有联系时,才使用这个作用域插槽。简单点来说就是:可以使用 子组件的数据 和 父组件传过来的props的值。
//引入组件的页面
<template>
<div>
<!--这里向组件传入props-->
<slotScope :message='msg'>
<!--这里的thing是随便取的名称,不与任何地方对应-->
<div slot='sayWhat' slot-scope='thing'>说了:{{thing.said}}</div>
<!--这里的val也是随便取的名称,不与任何地方对应-->
<template slot='listbox' slot-scope='val'>
<p>{{val.send.text}}</p>
</template>
</slotScope>
</div>
</template> <script>
import slotScope from '../components/slotScope' export default{
data () {
return {
msg: '这是动态传入的slot的内容',
}
},
components:{slotScope }
}
</script> <style>
</style>
//组件页面
<template>
<div>
<!--这里最重要的是 :send=value,send也是可以随便取的,表示要传过去的值-->
<slot name='listbox' v-for='value in list' :send='value'></slot>
<!--这里最重要的是 :said='message',said也是可以随便取的,表示要传过去的值-->
<slot name='sayWhat' :said='message'></slot> <ul>
<li v-for='item in list' :key='item.id'>{{item.text}}</li>
</ul>
</div>
</template> <script>
export default {
props:['message'],
data:function(){
return {
list:[{
"id":10,
"text":"苹果"
},{
"id":20,
"text":"香蕉"
},{
"id":30,
"text":"梨"
},{
"id":40,
"text":"芒果"
}]
}
}
}
</script> <style>
</style>
结果:
注意事项:
1) 作用域插槽主要是 使用子组件的任何数据 来达到自定义显示内容的目的
2) 作用域插槽最最最最最重要的一步,即是在<slot></slot> 上绑定数据 ,如果没有绑定数据,则父组件收到的,只是一个空对象{ }。
3) 作用域插槽中 <slot></slot> 上绑定数据,可以是写死的,也可以是动态绑定的。如果是动态绑定的,则也需要 v-bind:xxx
4) 作用域插槽中 <slot></slot> 上绑定的数据 也可以传一个定义好的有返回值的 mthods 方法。比如我定义了 <slot what='say()'></slot> ,然后say方法为: say:function(){ return '我说了' } 。最后得到的结果就是 "我说了",当然,动态绑定一定要加 v-bind:xxx。
5) 当 <slot></slot> 绑定上数据之后,引用组件的地方 中 发送的内容就能通过 slot-scope 来获取。获取到的内容,就是一个对象,比如 <slot name='sayWhat' said='message'></slot> 我这里绑定 said='message' 之后, 那边接收到的就是 { said:"xxxx"} 一个对象。
6) slot-scope 可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式。
vue 2.6.0之后 v-slot 只能用在 组件component 或者 template 上 ,用在 div 或 p 这种标签上是会报错的
1. 具名插槽的变化
<testSlot>
<!--2.6.0以前的写法-->
<template slot='header'>
<p>------------header----------------</p>
<h3>这是header1的内容</h3>
<p>这是header2的内容</p>
</template> <!--2.6.0之后的写法-->
<template v-slot:header>
<p>------------header----------------</p>
<h3>这是header1的内容</h3>
<p>这是header2的内容</p>
</template>
</testSlot>
1) slot=' xxx ' 改成了 v-slot : xxx 并且冒号后面这个名称不能打引号
2) 组件页面中slot的内容没有变化
3) 2.6.0 之后 具名插槽 v-slot:header 可以缩写为 #header ,必须是有参数才能这样写!!! # = "xxx " 这样是不行的 #default = 'xxx' 这样才可以
2. 作用域插槽的变化
<slotScope :message='msg'>
<!--2.6.0之前的写法-->
<div slot='sayWhat' slot-scope='thing'>说了:{{thing.said}}</div> <template slot='listbox' slot-scope='value'>
<p>{{value.send.text}}</p>
</template> <!--2.6.0之前的写法,不能单独用在html标签上-->
<template v-slot:sayWhat='thing'>
<div>说了:{{thing.said}}</div>
</template>
<template v-slot:listbox='value'>
<p>{{value.send.text}}</p>
</template>
</slotScope>
1) 两个属性合并成了一个 v-slot : 插槽名称 = ' 传过来的值 ' 。
2) 组件页面中slot的内容没有变化 。
3) v-slot 不能用在 html 标签上 。
4) 如果是默认插槽 可以写成 v-slot='xxx'。
5) 还增加了 可以解构插槽props 和 设置默认值的内容,具体的可以查看官网 解构插槽
3. 新增的还有 动态插槽名
什么是动态插槽名?大致就是动态指令参数也可以用在v-slot上,这个就要涉及到2.6.0新增的 动态参数
<template v-slot:[attrContent]='msg'>
xxx
</template>
这个 attrContent 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。 比如这里attrContent 最终的值为 default 则渲染出来的结果 就是 v-slot:default='msg' 。
注意:
1) 单独在 [ ] 方括号中也可以使用表达式,但是不能存在引号和空格
2) 当然 这个动态的值 可以通过 方法,计算属性,或者 data数据 里面的内容。重要的是这个动态的值 是 引用组件的 作用域。简单点说就是父级组件的作用域。
例如,上面 v-slot:sayWhat='thing' 可以写成:
1) v-slot:[first+sec]='thing' 注意 加号两边不能留空格
2) v-slot:[attr]='thing'
3) v-slot:[attrs]='thing'
4) v-slot:[getattr()]='thing'
export default{
data () {
return {
msg: '这是动态传入的slot的内容',
attr:'sayWhat',
first:'say',
sec:'What',
}
},
components:{ slotScope },
computed:{
attrs:function(){
return 'sayWhat'
}
},
methods:{
getattr(){
return 'sayWhat'
}
}
}
到此,插槽的内容就介绍完毕了。^_^ Y
vue---slot,slot-scoped,以及2.6版本之后插槽的用法的更多相关文章
- 详解Vue的slot新用法
摘要: 理解Vue插槽. 作者:前端小智 原文:vue 2.6 中 slot 的新用法 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue ...
- vue中slot插槽
插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...
- vue之slot,组件标签嵌套
vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...
- vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...
- Vue中slot内容分发
<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性 <!DOCTYPE html> <html> <head> <meta ...
- vue 中slot 的具体用法
子组件 <template> <div class="slotcontent"> <ul> <!--<slot></sl ...
- vue中slot组件的使用
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. Slot 是在组件模板中设置的用于在父组件中 ...
- vue中slot的用法案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 之 slot(插槽)
前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧 ...
随机推荐
- Delphi Record To Stream
type TUserInfo = record sUserId,sUserName:String; iUserCount:integer; end; procedure TForm1.Button1C ...
- 宋宝华:Docker 最初的2小时(Docker从入门到入门)【转】
最初的2小时,你会爱上Docker,对原理和使用流程有个最基本的理解,避免满世界无头苍蝇式找资料.本人反对暴风骤雨式多管齐下狂轰滥炸的学习方式,提倡迭代学习法,就是先知道怎么玩,有个感性认识,再深入学 ...
- Swift JSON字符串和字典以及数组的互转
1.JSONString转换为字典 // JSONString转换为字典 func getDictionaryFromJSONString(jsonString:String) ->NSDict ...
- Canvas中的非零环绕
先上图 当要填充图形时,必须区分开哪些部分是覆盖的,哪些是空的,根据绘制的方向可以判断出来 非零环绕规则:对于路径中指定范围区域,从该区域内部画一条足够长的线段,使此线段的完全落在路径范围之外. 非零 ...
- JetBrains 注册码
C40PF37RR0-eyJsaWNlbnNlSWQiOiJDNDBQRjM3UlIwIiwibGljZW5zZWVOYW1lIjoiemhhbmcgeW9uZyIsImFzc2lnbmVlTmFtZ ...
- supervisor management kafka zookeeper
# cat kafka.ini [program:kafka] command=/usr/local/kafka/bin/kafka-server-start.sh /usr/local/kafka/ ...
- python3 闭包函数
'''闭包函数:内部函数引用外部函数变量(非全局变量)'''def func(y): x = 1 def func1(): print(x, y) return func1 f = func(2)pr ...
- C# 对文本文件的几种读写方法总结
计算机在最初只支持ASCII编码,但是后来为了支持其他语言中的字符(比如汉字)以及一些特殊字符(比如€),就引入了Unicode字符集.基于Unicode字符集的编码方式有很多,比如UTF-7.UTF ...
- Android/Linux Thermal框架分析及其Governor对比
图表 1 Thermal框架 随着SoC性能的快速提升,功耗也极大提高,带来的负面影响是SoC的温度提高很快,甚至有可能造成物理损坏.同时功耗浪费也降低了电池寿命. 从上图可知,Thermal框架可以 ...
- 关于hibernate查询结果类的封装
实际应用中,我们查询的结果有时候会需要其他的类或者是一个新的包装类,即希望映射到一个DTO(即使hibernate早在很久就不推荐使用..)但我还是说一下吧 如 我有这样子的两个类 //get和set ...