vue 2.6 插槽v-slot用法记录

v-slot用法简记

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

用法示例

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

匿名插槽与具名插槽

在其他组件中使用child组件


  

child组件

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

插槽作用域

在其他组件中使用child组件

用法一:常规用法,slotProps为自定义作用域名


  

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


  

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




组件使用插槽动态命名

v-slot:{dynamicSlotName}

总结

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

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

你可能感兴趣的:(Vue,vue,v-slot,插槽)