将数据从 Laravel 传递到 Vue 组件的最佳实践

Posted 2023-02-22

【中文标题】将数据从 Laravel 传递到 Vue 组件的最佳实践

【英文标题】：Best practice to pass data from Laravel to Vue component

【发布时间】：2018-12-24 06:33:57

【问题描述】：

这是我的刀片代码

<div id="app">
  <Testcomponent bam-wam="ham" />
</div>

这是我的 VueJS 组件代码

<script>
    export default 
        name: "ExampleComponent",
        props: [
            'bamWam'
        ],
        data () 
            return 

            ;
        ,
        created() 
            console.log(this.bamWam);
        
    
</script>

问题是

这段代码运行良好，但我想问什么更好使用 Axios 和 Vuex 从我的 Laravel 应用程序中获取数据 或者只是 像我在这段代码中所做的那样传递数据抛出道具?

【问题讨论】：

两者都可以，这真的取决于用例。如果你使用 Laravel 来生成所有的视图并且只是让 vue 组件分布在整个项目中，那么这个实现可能就很好了。如果您尝试使用 vue 构建整个前端或 SPA，并更多地使用 Laravel 作为后端 API，那么请使用 AJAX。

谢谢您的帮助..您可以将其发布为答案

这不是一个真正的答案，这只是我的意见。此处不鼓励最佳实践/自以为是的问题和答案。我很高兴能帮上忙，不过我可能会删除这个问题。

【参考方案1】：

通过 props 传递数据是最好的方式。

<my-component my-data="yourData"></my-component>

如果你想使用 laravel 变量来获取刀片数据，那么，

<my-component my-data="' $data.id '"></my-component>

<my-component :my-data="'!! json_encode($data) !!'"></my-component>

尽量避免api调用。它将减少对服务器的请求总数并暴露更少的 api 端点。

【讨论】：

谁给这个家伙投了反对票？这应该被接受为答案。不完美，但这是完成工作的一种方式。

如果您看到您的数据开始显示而不是发送到您的组件，请尝试使用:my-data=" json_encode($data) " source

【参考方案2】：

如果数据可用于添加组件的视图。那么将 php 数组从 laravel 传递到 vue 组件的最佳方法是使用 json 编码，如下所示：

<my-component :needed-data='@json($laravelCollection)'></my-component>

这将使您可以轻松地对 Vue 控制器中的 php 数组执行操作，就好像它是一个 JS 对象一样。请记住，@json 必须使用单引号。

对于简单的字符串，您可以直接将其作为道具传递而无需编码。

这种方法比专门为这个组件创建一个新的 API 要好。

【参考方案3】：

这是唯一适合我的方法：

<my-component :data=" $collection "></my-component>

JSON 解析解决方案以 html 格式打印数据。