将数据从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应用程序中获取数据或者只是像我在这段代码中那样传递数据抛出道具？

Answer 1

通过道具传递数据是最好的方法.

<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端点.

Answer 2

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

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

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

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

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