Vuejs 組件未向 laravel 注冊

Question

我知道這個問題被問了好幾次，但我找不到任何解決我的問題的方法。

我的 laravel 項目中有兩個 vue 組件。 第一個是 laravel 默認組件，名為“ExampleComponent.vue”，第二個是我自己的新組件，名為“multi.vue”。

我在 section.blade.php 文件中使用它們，如下所示：

@extends('layouts.app')

@section('content')
<example-component></example-component>

<multi></multi>

@endsection

但只有“示例組件”有效，對於“多”組件，它給了我以下錯誤：

未知的自定義元素： - 您是否正確注冊了組件？ 對於遞歸組件，請確保提供“名稱”選項。

這是我的 app.js 代碼：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('multi', require('./components/multi.vue').default);

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

這是我的組件代碼：

示例組件.vue：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

還有我的 multi.vue：

<template>
  <div>
      I am multi component!
  </div>
</template>

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

<style>

</style>

路線是：

Route::get('/section',function(){
    return view('section');
});

Answer 1

要解決這個問題，您需要做的就是運行“運行 npm 手表”。

運行該命令后，每當您更改代碼並保存時，它都會重新編譯您的 vue 代碼。

將其保存在單獨的終端中，然后在另一個終端中運行“php artisan serve”。

Answer 2

來自https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential ：

除了根 App 組件和 Vue 提供的內置組件（例如<transition>或<component> ）外，組件名稱應始終為多字。

這可以防止與現有和未來的 HTML 元素發生沖突，因為所有 HTML 元素都是一個單詞。