Vue具名插槽报Named slots must use '<template>' on a custom element怎么解决

错误原因 #

Vue具名作用域插槽的语法规则明确要求：v-slot指令只能绑定在<template>标签上使用，不允许直接挂载到自定义组件的根标签上。你当前将v-slot:user直接写在<User>组件标签上，违反了该语法规范，因此触发报错。

解决方法 #

将v-slot:user指令移动到包裹插槽内容的<template>标签上即可，修正后的代码如下：

<template>
    <div>
        <h3>Home</h3>
        <User>
            <template v-slot:user="{ user }">
                <div v-if="user">
                    <p>Logged-in as {{user.uid}} </p>

                    <!-- PASS USER STATE AS PROP -->
                    <UserProfile :user="user"/> 
                    <ChatList :uid="user.uid"/>
                </div>
                <Login v-else/>
            </template>
        </User>
    </div>
</template>

如果使用Vue 2.6及以上版本，还可以使用语法糖缩写，将v-slot:user简化为#user：

<template #user="{ user }">

内容的提问来源于stack exchange，提问作者Jordan Williams