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

Posted 2023-02-23

【中文标题】Vue JS - 添加多个组件的问题

【英文标题】：Vue JS - Issue adding multiple components

【发布时间】：2018-07-21 10:11:30

【问题描述】：

我是 Vue JS 的新手，我已经在线阅读了几篇不同的文章，但我不知道如何显示我的组件。我正在使用 Laravel 5.5。

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

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

我在/components/Auth/Login.vue 创建了一个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 更改为模板文件，但它没有更新 - 它仍然显示旧模板。我怎样才能让它出现？

【问题讨论】：

尝试为您的登录组件提供一个名称，如错误文本中所述。为此，在 Login.vue 的导出对象中添加 name: 'login-form',

@oniondomes 喜欢这样吗？ export default name:'login-form', mounted() console.log('Component mounted.') - 试过了，但仍然出现同样的错误。

我只是想通过 gues 提供帮助，但尝试摆脱这些内联 requires。 const Login = require('./components/Auth/Login.vue'); 在引导行之后。如果它仍然不起作用，请检查它的值

您能否更新您的问题并将bootstrap.js 文件中的代码包含在resources/assets/js 文件夹中？

@NikolaGavric 是默认的 laravel 设置...github.com/laravel/laravel

【参考方案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，还要针对所有嵌套组件。

【讨论】：

虽然这可能会解决问题，但这里是注册全局和本地组件的参考：vuejs.org/v2/guide/components.html#Using-Components

嗯，还是有一些问题。我正在尝试使用标签<login-form>，而对于 Laravel，它似乎甚至没有在resources/js/app.js 中获取这个 vue 文件我需要将它移动到public/js/..etc 吗？这是 Laravel 的基本安装 - 没有任何改变。

【参考方案2】：

你的问题是我想的那样，但我认为那行在bootstrap.js 中，这就是我想查看该文件的原因，无论如何，你会注意到你从未在你的app.js 中导入Vue从laravel 入门项目中，该行在app.js 内而不是bootstrap.js 中，只需查看您的app.js，我就发现您不见了

window.Vue = require('vue');

所以我的猜测是在 require('./bootstrap.js'); your app will register bothVue` 组件下面添加这一行