php - 如何将 PHP 变量传递给 Laravel Blade 中的 Vue 组件实例？

Question

如何将 PHP 变量的值传递给 Laravel blade 文件中的 Vue 组件？

在我的示例中，我有一个内联模板客户端详细信息，我从 Laravel 获得此 View 所以现在我想通过 id带有 url /client/1到我的Vue实例。

我的组件，由 Laravel 加载，看起来像:

<client-details inline-template>
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

安装者:

Vue.component('client-details', {
    data(){
        return {
            clientId: null
        }
    },
);

我已经试过了

:clientId="{{ $client->id }"

但它不起作用。

Answer 1

您必须使用 Vue 的 props 才能通过标记将属性传递给 Vue 的组件。看看下面的例子:

<client-details inline-template client-id="{{ $client->id }}">
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

在你的 Vue 组件中:

Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});

现在在 Vue 组件的其他部分，您可以将此值作为 this.clientId 访问。

问题详情

请注意，在 HTML 中，我们以 kebab-case 编写属性名称，但在 Vue 端，我们以 camelCase 编写。更多信息在 official docs here .

此外，您在 :clientId="{{ $client->id }}" 中使用了 Vue 的 v-bind 速记，这意味着 Vue 将处理其中的任何内容双引号作为 JavaScript 表达式，因此在这种情况下您也可能会出错。相反，您应该使用不带冒号的 clientId="{{ $client->id }} 格式。