Laravel &引用；属性或方法'；xxxx和x27；没有定义；On<；组件v-bind:is="；xxxx“&燃气轮机；

我正在制作一个多页面的vue应用程序。（尽量不使用SPA方法）我从这里选择建议的“选项2”

在我的主

layout.blade.php

模板中，我有这个

<div id="app">
    @if (isset($component))
        <component v-bind:is={{ $component }} inline-template>
            <div>
    @endif

        @yield('content')

    @if (isset($component))
            </div>
        </component>
    @endif
</div>

我在

resources/js/page components/MealCreate.vue

中保存了一个组件，该组件将包含该页面的所有vue逻辑。看起来像这样

<script>
    export default {

        data() {
            return {
              // Some data ....
            };
        },
        created() {
           // ....
        },

        methods: {
            // ......
        }
    };
</script>

// Page Components
Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);

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

但是，现在当我加载页面时，出现以下错误：

属性或方法“mealcreate”未在实例上定义，但在呈现过程中被引用。

此错误中的属性/方法更改为我在

中设置的
@extends（'layouts.app'，['component'=>'mealcreate']）

@extends('layout.app', ['component' => 'mealcreate']) // This sets the component name for layout.blade.php

@section('content')

   // Page Content Here...

@endsection

我错过什么了吗？当它只是一个组件的名称时，为什么会发生这种情况

谢谢你的帮助
 您需要将mealcreate添加到components部分

Vue.component('mealcreate', require('./page-components/MealCreate.vue').default);

const app = new Vue({
    el: "#app",
    components: {
        mealcreate   // <-- this
    }
});

Vue.component（'mealcreate'，require（'./页面组件/mealcreate.Vue'）。默认值）；
const app=新的Vue({
el:“应用程序”，
组成部分：{
米尔克雷特//