Vue.js 错误：命名槽必须在自定义元素上使用“<template>”

Question

我试图通过插槽传递信息，但不断收到错误，

“命名槽必须在自定义元素上使用 ''。”

请参阅下面的我的代码。

    <template>
        <div>
            <h3>Home</h3>
            <User v-slot:user="{ user }">
                <template>
                <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>

我在以下行中收到错误。

    <User v-slot:user="{ user }">

Answer 1

根据您的组件名称，我怀疑该User组件包含“用户”插槽。

应该v-slot位于标签<template>内<User>：

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

    <Login v-else />
  </template>
</User>

演示