Question

我是Vue JS的新手，我已经在线阅读了几篇不同的文章，但我无法弄清楚如何展示我的组件。我使用的是Laravel 5.5。

我有一个登录视图页面，其中包含以下内容：

<div id="app">
    <div class="login-box">
        <login-form></login-form>
    </div><!-- /.login-box -->
</div>

我在Login.vue创建了/components/Auth/Login.vue页面：

<template>
    <div class="login-box-body">
        <p class="login-box-msg"> Sign in to start your session. </p>
        <form action="{{ url('/login') }}" method="post">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="Username" name="username"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="Password" name="password"/>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox" name="remember"> Remember Me
                        </label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                </div>
            </div>
        </form>
        <a href="{{ url('/password/reset') }}"> Forgot Password? </a><br>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

我已在app.js文件中注册了它：

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));
Vue.component('login-form', require('./components/Auth/Login.vue'));

const app = new Vue({
    el: '#app',

});

我收到错误[Vue warn]: Unknown custom element: <login-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance)。

我已经在app.js注册了它，如上所示，如果我使用<example></example>，它就会正确显示。

我将Example.vue更改为模板文件，并且它还没有更新-it仍然显示旧模板。我怎样才能出现这个？

Answer 1

我记得几个星期前我在同一个问题上苦苦挣扎。

简而言之，修复方法是不要那样做。

相反，您希望明确地注册每个组件：

require('./bootstrap');

const Example =  require('./components/Example.vue');
const Login = require('./components/Auth/Login.vue');

const app = new Vue({
    el: '#app',
    components: { Example, Login }
});

上述内容不仅要针对Vue，还要针对所有嵌套组件进行。

Answer 2

你的问题就是我认为的问题，但我认为那条线在bootstrap.js，这就是为什么我想看到那个文件，无论如何，你会注意到你从未如何导入Vue您的app.js以及laravel初学者项目中的该行位于app.js而不是bootstrap.js内，只是通过查看app.js我看到您遗失了

window.Vue = require('vue');

所以我的猜测是在require('./bootstrap.js'); your app will register both Vue`组件

下添加这一行

Vue JS - 添加多个组件的问题

2 个答案: