javascript - Vue.js 错误：命名槽必须使用 '' on a custom element
I am trying to pass information through slots and I keep getting an error,
'Named slots must use '' on a custom element.'
See below for my code.<
问题描述
I am trying to pass information through slots and I keep getting an error,
'Named slots must use '' on a custom element.'
See below for my code.
<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>
I get an error on the following line.
<User v-slot:user="{ user }">
Based on your component names, I suspect the User component contains the "user" slot.
The v-slot should be on a <template> within the <User> tags:
<User>
<template v-slot:user="{ user }">
<div v-if="user">
<p>Logged-in as {{ user.uid }}</p>
</div>
<Login v-else />
</template>
</User>
解决方案
根据您的组件名称，我怀疑该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>
推荐阅读
- admob - 如何将 ti.admob 与 Android 应用程序一起使用？示例不起作用
- grails - Gorm：对象映射
- javascript - 有没有办法在 p5.js 中使用默认字体在文本后面放置一个框？
- python - Python subprocess.call 非零退出状态1
- reactjs - 状态并不总是更新
- macos - auval：错误：类数据没有必填字段：
== 组件类型 - console - F9 在 Spyder 中执行选定的文本？
- ruby-on-rails - Ruby on Rails 表单与表中的 collection_check_boxes - has_and_belongs_to_many 关联
- javascript - 在渲染组件之前根据其 id 设置默认活动项
- ios - 未从 JSON Swift 获取数据
I am trying to pass information through slots and I keep getting an error,
'Named slots must use '' on a custom element.'
See below for my code.<
问题描述
I am trying to pass information through slots and I keep getting an error,
'Named slots must use '' on a custom element.'
See below for my code.
<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>
I get an error on the following line.
<User v-slot:user="{ user }">
Based on your component names, I suspect the User component contains the "user" slot.
The v-slot should be on a <template> within the <User> tags:
<User>
<template v-slot:user="{ user }">
<div v-if="user">
<p>Logged-in as {{ user.uid }}</p>
</div>
<Login v-else />
</template>
</User>
根据您的组件名称，我怀疑该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>