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

Question

这是我的刀片代码

<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应用程序获取数据还是像我在这个代码中所做的那样简单地通过props传递数据？

- Dill

---

两种方式都可以，具体取决于使用场景。如果你在使用 Laravel 生成所有的视图，并且只是在整个项目中散布了一些 Vue 组件，则这种实现方法可能就足够了。但如果你尝试用 Vue 来构建整个前端或单页应用，并将 Laravel 更多地作为后端 API 使用，则最好对所有内容都使用 AJAX。 - Devon

谢谢，这非常有帮助。你可以将它发布为回答。 - Dill

这并不是一个真正的答案，只是我的个人意见。在这里，最佳实践/有主见的问题和答案是不被鼓励的。我很高兴能够帮忙，但我可能会删除这个问题。 - Devon

Answer 1

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

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

如果您想要使用Laravel变量来获取来自Blade的数据，则：

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

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

尽可能避免 API 调用。这将减少对服务器的请求总数并暴露更少的 API 端点。

- Summonjoy

---

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

如果你发现你的数据是显示而不是被发送到组件中，尝试使用 :my-data="{{ json_encode($data) }}"。来源 - avn

Answer 2

如果数据在添加组件的视图中可用，那么将 PHP 数组从 Laravel 传递到 Vue 组件的最佳方法是利用 json 编码，例如：

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

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

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

使用此方法比为此组件创建新API更好。

- Hasan Wajahat

Answer 3

这是我唯一行得通的方法：

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

将JSON解析的结果打印在HTML中。

- NReyes