vue 2.6 插槽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="作用域名"