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

Question

我的看法是这样的：

@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)

II如何解决错误？

Answer 1

答案完全取决于您如何编写组件。 因为 Laravel 鼓励使用单文件组件，所以我假设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组件可用。