Компонент внутри слота по умолчанию

Question

Я довольно новичок в Vue и в настоящее время работаю над первым проектом с ним.

Я столкнулся с этой проблемой, для которой не могу найти решение, у меня есть компонент "AuthPage.vue", которыйимеет слот для сообщения и слот по умолчанию для контента, после того, как я поместил пользовательский компонент в свой login.blade.php, он должен быть предварительно заполнен в этом слоте, но он говорит, что пользовательский элемент не существует.Если я заменим слот внутри .vue файла на пользовательский элемент, он, кажется, будет работать отлично.Я не уверен, что я делаю неправильно.

AuthPage.vue

<template>
<div>
    <div class="page-brand-info"></div>

    <div class="page-login-main">
        <img class="brand-img" src="/assets/global/images/logo.jpg">
        <h3 class="font-size-24 text-center"><slot name="title"></slot></h3>
        <slot name="message"></slot>

        <slot></slot>

        <footer class="page-copyright">
            <p>© {{ moment().year() }}. All RIGHT RESERVED.</p>
        </footer>
    </div>
</div>
</template>
<script>
    import LoginForm from './LoginForm.vue';
    import ResetPasswordForm from './ResetPasswordForm.vue';

    export default {
        components: { LoginForm, ResetPasswordForm }
    }
</script>

login.blade.php

@extends('backoffice.layout.auth')

@section('content')
<auth-page>
    <template v-slot:title>Sign In</template>

    <login-form></login-form>
</auth-page>
@endsection

Спасибо за вашу помощь!Эдди

Answer 1

Вам необходимо зарегистрировать компонент LoginForm глобально, чтобы он мог быть передан в компонент AuthPage как слот (при передаче непосредственно из представления). Это потому, что вне области действия вашего компонента Vue не знает, что такое <login-form>.

Поскольку вы используете laravel, в вашем файле resources/js/app.js добавьте следующее:

import LoginForm from './path/to/LoginForm.vue';

Vue.component('login-form', LoginForm);