默认插槽内的组件答案

【问题标题】：Component inside the default slot默认插槽内的组件
【发布时间】：2019-05-13 15:35:55
【问题描述】：

我对 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>

@extends('backoffice.layout.auth')

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

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

感谢您的帮助！埃迪

【问题讨论】：

您的LoginForm 组件是否已在全球范围内注册？
不，我只是在 AuthPage.vue 中导入

标签： laravel vue.js vuejs2

【解决方案1】：

您需要全局注册LoginForm 组件，以便将其作为插槽传递到AuthPage 组件（直接从视图传入时）。这是因为，在您的组件范围之外，Vue 不知道 <login-form> 是什么。

由于您使用的是 laravel，请在您的 resources/js/app.js 文件中添加以下内容：

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

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

【讨论】：