Question

我尝试在Laravel 5.7中使用VueJS内联模板组件，但遇到此错误

[Vue警告]：未知的自定义元素：-您是否已注册组件正确吗？对于递归组件，请确保提供“名称”选项

这是我在show.blade.php上的示例代码

@extends('layouts.app')

@section('content')

    <div class="content">
        <progress-view inline-template>
            <h1>Test Inline Template Component</h1>
        </progress-view>
    </div>


@endsection

@section('js_after')
    <script>

        Vue.component('progress-view', {
            data() {
                return {};
            },
        });

    </script>
@endsection

app.js上的默认Laravel VueJS实例

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

如何解决此问题？我需要在Laravel app.js中注册组件吗？如果是，我需要什么语法？

谢谢

Answer 1

注册Vue组件时，您需要包括一个名称，在下面列出：

export default {
        name: 'example-name',
        data() {
            return {
            }
        },

这对您的情况有所帮助-让我知道：）

Answer 2

我和你有同样的错误。实际上，我来到您的问题中寻找答案??‍♂️。这终于对我有用。我正在Vue内嵌地做一个“订阅按钮”组件。

所以我有subscription-button.js（我认为将其重命名为.vue没问题）：

Vue.component('subscribe-button', {
  // logic
})

然后，我将这行添加到app.js中，仅低于vue的要求：

window.Vue = require('vue');
require('./components/subscribe-button.js')

在刀片文件中，我现在可以使用：

<subscribe-button inline-template>
    {{-- blade code here --}}
</subscribe-button>

Answer 3

我终于找到了在Laravel中使用VueJS内联模板的解决方案。

使用此解决方案，您可以享受两全其美的体验，可以使用熟悉的Laravel刀片语法，同时使用VueJS保持应用程序的响应速度。

Laracast第https://laracasts.com/series/lets-build-a-forum-with-laravel/episodes/32

中也介绍了此技术

这是一步一步的完整

步骤1：创建单个文件组件。示例ShowUserComponent.vue

<script>

        export default {
            mounted() {
                console.log('inline template component');
            },
            data () {
                return {
                    message: 'This is test message'
                }
            },
            methods: {
                store() {
                    alert('Test inline component method')
                }
            }
        }
    </script>

第2步：在Laravel app.js中引用文件，并在终端中运行“ npm run dev”命令

Vue.component('show-user-component', require('./components/admin/users/ShowUserComponent.vue'));

第3步：现在，您可以使用Laravel Blade文件中的组件了

@extends('layouts.app')

    @section('content')

        <div class="content">
            <show-user-component inline-template>
                        <div>
                            <h1>@lang('users.edit')</h1>
                            <input type="text" v-model="message">
                            <button @click="store" >Click</button>
                        </div>
                    </show-user-component>
        </div>

    @endsection

Laravel VueJs组件内联模板，未知的自定义元素

3 个答案: