javascript - Vue.js 错误 : Named slots must use '<template>' on a custom element

Question

我正在尝试通过插槽传递信息，但我不断收到错误消息，

'Named slots must use '' on a custom element.'

请参阅下面的代码。

    <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>

demo