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

总结

以上是生活随笔为你收集整理的vue 2.6 插槽v-slot用法记录的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。