Vue.js error: 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 应该在 <User> 标签内的 <template> 上：

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

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

demo

Vue.js error: Named slots must use '<template>' on a custom element

Vue.js error: Named slots must use '<template>' on a custom element

javascript

vue.js

vuejs-slots