v-slot用法简记

用法示例匿名插槽与具名插槽插槽作用域组件使用插槽动态命名 总结

用法示例

vue2.6统一了插槽的语法v-slot

匿名插槽与具名插槽

在其他组件中使用child组件

<child> <template v-slot:slotName> hello world </template> </child>

child组件

<div> <slot name="slotName"></slot> </div>

上面是具名插槽的用法，省略插槽名：name属性或插槽名为default表示匿名插槽

插槽作用域

在其他组件中使用child组件

用法一：常规用法，slotProps为自定义作用域名

<child> <template v-slot:slotName=“slotProps”> hello world <span>{{ slotProps.user.firstName }}</span> </template> </child>

用法二：解构插槽Prop，实际上就是ES6解构JSON，可以使用:替换参数名

<child> <template v-slot:slotName=“{ user, age:nianling }”> hello world <span>{{ user.firstName }}</span> <span>{{ nianling }}</span> </template> </child>

child组件，定义时将需要使用的作用域数据绑定在<slot>即可，:user="user" :age="age"

<template> <div> <slot name="slotName" :user="user" :age="age"></slot> </div> </template> <script> export default { data () { return { user: { firstName: 'Cliff', lastName: 'Rhine' }, age: 24 } } } </script>

组件使用插槽动态命名

v-slot:{dynamicSlotName}

总结

vue2.6后插槽的用法简单得了很多，也更加灵活，通过上面的示例可以看出，作用域插槽实际上就是在具名插槽的基础上进行赋值。

v-slot:插槽名 v-slot:插槽名="作用域名" v-slot="作用域名"