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 }">
CodePudding user response:
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>