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="作用域名"
