用法示例

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