如何解决错误：[Vue 警告]：未知的自定义元素：<delete-account-modal>？答案

【问题标题】：How to solve error : [Vue warn]: Unknown custom element: <delete-account-modal>?如何解决错误：[Vue 警告]：未知的自定义元素：<delete-account-modal>？
【发布时间】：2017-01-19 18:34:34
【问题描述】：

我的看法是这样的：

@extends('layouts.main')

@section('title', 'Bank | Myapp')

@section('content')

    @if (Auth::user())
        ...

        <li>
            <a href="javascript:;" @click="modalShow('modal-delete-account',{{ $account['id'] }})">
                <span class="glyphicon glyphicon-trash"></span>&nbsp;Hapus
            </a>
        </li>
        ...                                 

    @endif

@endsection

@section('modal')
    @include('components.modal.profile.setting.account')
    <delete-account-modal id="modal-delete-account" :id-account="idModal"></delete-account-modal>
@endsection

执行时，控制台出现如下错误：

[Vue warn]: Unknown custom element: <delete-account-modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.  (found in root instance)

我该如何解决这个错误？

【问题讨论】：

Vue 正在寻找一个名为delete-account-modal 的组件，那么你注册了delete-account-modal 组件了吗？
@craig_h, 如何注册？这是我第一次使用 vue.js
这取决于，您是否使用elixir 编译所有内容并创建.vue 文件？
@craig_h，是的，我在 resources\assets\js\app.js 上注册了。我在 resources\assets\js\components\bootstrap 和 resources\assets\js\api 上添加了模式。但它不起作用
您可能需要向我们展示您的 app.js

标签： php laravel vue.js laravel-5.3 vuejs2

【解决方案1】：

这个问题的答案完全取决于您如何编写组件。因为 Laravel 鼓励使用 single file components，所以我假设 delete-account-model 在 resources/assets/js/components 中名为 delete-account-model.vue 的文件中，我还假设 elixir 设置为正确编译 .vue 文件

因此，要全局注册组件，您只需将以下内容添加到resources/assets/js/app.js：

Vue.component('delete-account-modal', require('./components/delete-account-model.vue'));

然后运行gulp 重新编译所有内容。然后您应该会发现delete-account-modal 组件可用。

【讨论】：