只要动动手,插槽其实很简单
网上相关文档乱七八糟看了很多,真的是过目就忘。。。
还是乖乖跟着官方文档手动敲几行代码吧
在 2.6.0 中,官方为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。
匿名插槽
1,创建时填充后备内容,使用时根据需求填充内容
//defaultSlot.vue
<template>
<div>
<div>这是默认就显示的default</div>
<slot>这是备胎。。。</slot>
</div>
</template>
<script>export default {}</script>
//index.vue
<template>
<div>
hello...
<default v-slot:default> //v-slot:default可省略
this is default...
</default>
</div>
</template>
<script>
import Default from './defaultSlot'
export default {
components:{
Default,
}
}
</script>
执行结果:
hello...
这是默认就显示的default
this is default...
若将this is default... 注释掉
执行结果:
hello...
这是默认就显示的default
这是备胎。。。
具名插槽
后备内容的显示与匿名插槽同理
//nameSlot.vue
<template>
<div>
<div>这是默认就显示的name</div>
<slot name='name1'>这是备胎1。。。</slot>
<slot >这是备胎default。。。</slot>
<slot name='name2'>这是备胎2。。。</slot>
</div>
</template>
<script>export default {}</script>
//nameSlot2.vue
<template>
<div>
<div>测试一下能不能直接用在标签上</div>
<slot name='name22'>这是备胎备胎1。。。</slot>
</div>
</template>
<script>
export default {}
</script>
//index.vue
<template>
<div>
hello...
<name>
<template v-slot:name1>
name1
</template>
<template v-slot:default>//可省略
default
</template>
<template v-slot:name2>
name2
</template>
</name>
<name2 v-slot:name22>看来是可以的</name2> //也可以省略template标签
</div>
</template>
<script>
import Name from './nameSlot'
import Name2 from './nameSlot2'
export default {
components:{Name,Name2}
}
</script>
执行结果:
hello...
这是默认就显示的name
name1 default name2
测试一下能不能直接用在标签上
看来是可以的
作用域插槽
//scope.vue
<template>
<div>
<div>这是默认就显示的scope</div>
<slot name="username" :us="user">这是{{user.name}}:{{user.age}}</slot>
</div>
</template>
<script>
export default {
data(){
return {
user:{
name: 'scope',
age: 2
}
}
}
}
</script>
//index.vue
<template>
<div>
hello...
<!--<scope v-slot="userprops">只显示{{userprops.us}}</scope> //匿名插槽可以省略template-->
<scope>
<template v-slot:username="{us}"> //具名插槽传参时必须使用template,通过对象解构赋值获取参数
只显示{{us}}
</template>
</scope>
</div>
</template>
<script>
import Scope from './copeSlot'
export default {
components:{
Scope
}
}
</script>
执行结果:
hello...
这是默认就显示的scope
只显示{ "name": "scope", "age": 2 }
官方文档上的提到的 注意 v-slot 只能添加在 template标签 上,只有独占默认插槽的缩写语法除外,就是针对传参的情况下,v-slot只有在匿名插槽的情况下才可以直接放在组件上,不传参的情况下具名插槽也可以这样用,比如下面代码的 scope组件 使用时必须要嵌套 template标签 ,因为是具名插槽并且传参了
插槽缩写
v-slot可用 #替代,匿名插槽使用default,如
<default #default>
this is default...
</default>
<scope>
<template #username="{us}">
只显示{{us}}
</template>
</scope>