在过去的两三年里，我一直在研究同时使用 Vue 和 Laravel 的项目，在每个项目开发的开始阶段，我必须问自己 “我将如何将数据从 Laravel 传递到 Vue ？”。这适用于 Vue 前端组件与 Blade 模板紧密耦合的两个应用程序，以及运行完全独立于 Laravel 后端的单页应用程序。
这里有四种不同的方法从一个到另一个获取数据。
直接回显到数据对象或组件属性中
- 赞成: 简单明了
- 反对: 必须与嵌入到 Blade 模板中的 Vue 应用程序一起使用
可以说是将数据从 Laravel 应用程序移动到 Vue 前端的最简单方法。使用上面的任何一种方法，您都可以将 JSON 编码的数据回送给您的应用程序或其组件。
然而，最大的缺点是可扩展性。您的 JavaScript 需要直接暴露在模板文件中，以便引擎可以呈现您的数据。如果您使用 Vue 向 Laravel 站点的页面或区域添加一些基本的交互，这应该不是问题，但是您很容易就会遇到将数据强制放入压缩脚本的困难。
对于 Laravel 5.5+ 使用 json 指令：
使用自定义组件和 Laravel 自身的 json blade 指令可以让您轻松地将数据移动到道具中。此方法允许您划分 Vue 代码，将脚本与 Webpack 或 Mix 捆绑在一起，同时仍可以直接向其中注入数据。
将属性作为全局窗口注入
- 赞成: 在整个 Vue 应用程序和任何其他脚本中全局可用
- 反对: 可能很混乱，通常不建议用于大型数据集
虽然这看起来有点老生常谈，但将数据添加到窗口对象中可以轻松地创建全局变量，这些变量可以从应用程序中使用的任何其他脚本或组件访问。在过去，我用它作为存储和访问 API 基 URL、公钥、特定模型 ID 和各种其他需要在整个前端使用的小数据项的方法。
不过，使用此方法有一点需要注意，这就是访问 Vue 组件内部数据的方式。在模板内部，您将无法使用以下内容，因为 Vue 假定您尝试访问的窗口对象位于同一组件内：
// 不会起作用
<template>
<div v-if="window.showSecretWindow">
<h1>这是个秘密窗口，别告诉任何人！</h1>
</div>
</template>
相反，您需要使用返回值的计算方法：