Question

我对Vue相当陌生，目前正在与它一起进行第一个项目。

我遇到了这个似乎无法找到解决方案的问题，当我在自己的login.blade中放入自定义组件时，我就有了“ AuthPage.vue”组件，该组件具有用于消息的插槽和用于内容的默认插槽。 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);

默认插槽内的组件

1 个答案: