将数据从 Blade 模板传递到 Vue 组件

Question

这是一个新手问题。我有一个 Blade 模板：

<div id="app">
    <example-component
    :componentMessage="appMessage"
    ></example-component>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: function() {
            return {
                appMessage: {{$message}}
            }
        }
    })
</script>

还有一个 Vue 组件

resources/js/components/ExampleComponent.vue

<template>
    <p>{{componentMessage}}</p>
</template>

<script>
    export default {
        props: ['componentMessage'],
    }
</script>

因此数据流将如下所示：$message -> appMessage -> componentMessage

<example-component> 无法正常工作，因为我没有正确导入它。

我应该如何在 Blade 模板中使用 Example 组件？假设我使用的是 Vue CDN，并且我想在将 app 声明正确地保留在 Blade 模板上以进行花式 数据转换 （使用 Blade 语法），然后再将其传递给组件appMessage在中间？

我一直在寻找文件。有些需要在 resources/js/app.js 中声明 app，但如果我按照这种方式进行操作，则无法使用 Blade mustache 语法将数据传递给 app。

更新：

resources/js/app.js

import ExampleComponent from "./components/ExampleComponent.vue";

我试过添加

<script src="{{mix('js/app.js')}}"></script>

并在实例中添加了组件声明：

components: {
    'example-component': ExampleComponent,
}

但它仍然无法正常工作 (Invalid Component definition: ExampleComponent)。可能我错过了一些步骤。

Answer 1

傻我。我不需要在 app Vue 实例中声明 components 属性。只需在 resources/js/app.js 中指定您要使用的组件，该组件将在 Blade 模板中全局可用。

注意语法差异 Laravel 混合差异。这可能是问题 ()

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

将数据从 Blade 模板传递到 Vue 组件

Pass data from Blade template to Vue component

laravel

vue.js

laravel-blade

vue-component

vuejs2