v-slot再学习

240 阅读3分钟

只要动动手,插槽其实很简单

网上相关文档乱七八糟看了很多,真的是过目就忘。。。
还是乖乖跟着官方文档手动敲几行代码吧

在 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>