将数据从 Blade 模板传递到 Vue 组件 [重复]

Posted 2023-02-16

【中文标题】将数据从 Blade 模板传递到 Vue 组件 [重复]

【英文标题】：Pass data from Blade template to Vue component [duplicate]

【发布时间】：2021-11-14 05:23:22

【问题描述】：

这是一个新人的问题。我有一个 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，并且我想在 Blade 模板上保留 app 声明以进行花哨的 数据转换（使用 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声明：

components: 
    'example-component': ExampleComponent,

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

【问题讨论】：

这可能会有所帮助 ***.com/questions/53277538/… 我建议转移 laravel mix 和构建过程。如果你想走这条路，我可以帮你设置。

@Cameron 嗨，我在这个过程中确实使用了 Laravel Mix，我不熟悉它。另外，我更新了问题，请看一下

【参考方案1】：

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

注意 Laravel Mix 之间的语法差异。可能是问题所在 (Vue template or render function not defined yet I am using neither?)

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

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