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

Posted 2023-02-22

【中文标题】Vue.js 错误：命名插槽必须在自定义元素上使用 \'<template>\'

【英文标题】：Vue.js error: Named slots must use '<template>' on a custom elementVue.js 错误：命名插槽必须在自定义元素上使用 '<template>'

【发布时间】：2021-11-29 08:10:00

【问题描述】：

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

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

请参阅下面的代码。

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

【参考方案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