在VueJS中注入PHP数据的正确方法是什么？

Question

假设在PHP中有一些用户数据，存储在数组中：

[
  'name' => 'Tester',
  'level' => 999,
  'email' => 'tester@acme.com'
]

你必须将这个数组传递给你的VueJS应用程序，你会如何传递它？

我正在考虑在script标签中编写这个数组，以便JS解析它，但我也认为应该有另一种方法更安全和容易。

我不打算使用XHR，因为这个数据应该只在第一次请求时发送，这个数组将来不会改变，所以不需要XHR（一个请求就足够了）。

Answer 1

您可以将array作为prop (property)传递给vue组件。我在我的项目中使用了以下方法。

我们说，您的组件名称为dashboard，那么您调用组件的文件将如下所示

.....
<!-- Other html php stuff -->

<!-- Pass values to vue component -->    

<dashboard :details="<?php echo json_encode($your_array); ?>"></dashboard>

....

现在，您可以在dsashboard component

中定义道具，如下所示

....
 props: ['details'],
....

您可以以数组的形式直接访问this.details。

希望通过这种方式帮助你。

Answer 2

正确的方法是提出XHR请求，说实话。

但是......这绝对没有区别。只需将其放入script标记中，然后在Vue实例中使用它。没问题。