An element cannot have multiple ‘v-slot‘ directives.

1.使用vue中插槽时出现的问题

若对一个标签同时使用具名插槽和作用域插槽，若是这样写

<template v-slot="scope" #head></template>

会报An element cannot have multiple ‘v-slot’ directives.错误

2.原因

根据报错信息不难看出是因为一个标签不能同时有多个v-slot，#head的全写是 v-slot:head,所以这里同时出现了两个v-slot

3.解决办法

可以参考以前给标签绑定动态属性的写法

<a v-bind:href="url">xxx</a>

所以这里咱们也可以这么写避免同时出现两个v-slot

<template v-slot:head="scope" ></template>

还可以这么写 简写

<template #head="scope" ></template>