我该如何将 PHP 变量的值传递给 Laravel blade 文件中的 Vue 组件？
在我的示例中，我有一个 inline 模板 client-details，我从 Laravel 获取此视图，因此现在我想将随 url /client/1 传递的 id 传递给我的 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 }"
但它没有起作用。
<client-details inline-template client-id="{{ $client->id }}">
<div id="client-details" class="">
My HTML stuff
</div>
</client-details>
Vue.component('client-details', {
props: [
{
name: 'clientId',
default:0,
}
]
});
现在，在Vue组件的其他部分，您可以将此值作为this.clientId访问。
问题细节
请注意，在HTML中，我们以短横线风格（kebab-case）编写属性名称，但在Vue侧，我们使用驼峰式命名（camelCase）。更多信息请参见官方文档。
此外，您在:clientId="{{ $client->id }}"中使用了Vue的v-bind简写方式，这意味着Vue将处理双引号内的任何内容作为JavaScript表达式，因此在这种情况下您可能会遇到错误。相反，您应该使用不带冒号的格式clientId="{{ $client->id }}。
我刚刚尝试了这个方法，对我非常有效。 使用Laravel 5.4和Vue 2.x。
在我的组件中，为该对象声明一个属性（props）：
props：['currentUser']，
在实例化组件的Blade页面上：
<my-component v-bind：current-user ='{!! Auth :: user（） -＆gt; toJson（）！！}'></my-component>
请注意，在组件中，我正在使用camelCase作为currentUser，但是因为html不区分大小写，您必须使用kebab-case（因此，'current-user'）。
还要注意，如果您使用blade语法{{}}，则介于其间的数据会通过php htmlspecialchars 运行。 如果您想要未编码的数据（在这种情况下是），请使用{!! !!}
toJson()在JSON实体中使用双引号。 - Erich对于任何遇到此问题并仍然出现错误的人，正确答案已由Mustafa Ehsan提供，但未进行解释。尝试和错误帮助我看到了它。
我的组件在newuser.blade.php中。
<access-request
firstname="{{ $newuser->firstname }}"
lastname="{{ $newuser->lastname }}"
accessid="{{ $newuser->id }}"
>
</access-request>
需要注意的是绑定方法的使用。在上面的组件中，我只写了数据绑定的名称（类似于React props），然后在组件props中进行了注册（见下文）。这就是Mustafa在他的回答中所写的绑定方式，也是有效的。另一种更Vue的传递props的方式是使用v-bind:或：，但你必须确保同时使用双引号和单引号：
:firstname="'{{ $newuser->firstname }}'"
如果没有加上引号，你会收到Vue的警告。
AccessRequest.vue:
<template>
<div class="component">
<h3 class="">{{ firstname }} {{ lastname }}</h3>
<p>Access ID: {{ accessid }}</p>
<label for="administrator">Grant Administrator Priviledges:</label>
<input name="administrator" type="checkbox" value="True" class="mb-5"><br>
<button type="submit" class="btn btn-success">Add</button>
<button type="submit" class="btn btn-danger">Delete</button>
<hr>
</div>
</template>
<script>
export default {
name: "AccessRequest",
props: ['firstname', 'lastname', 'accessid'],
}
</script>
$server_data = json_encode([
"some-data" => SomeObject::all()
]);
return View::make('myview', compact('server_data'));
在模板中：
<script type="application/json" name="server-data">
{{ $server_data }}
</script>
<!-- Inserts server data into window.server_data -->
<script>
var json = document.getElementsByName("server-data")[0].innerHTML;
var server_data = JSON.parse(json);
</script>
computed: {
'server_data': function(){
return window.server_data;
}
}
然后，在组件模板中，可以使用server_data.some_object访问数据。
这样就可以传递大量结构化数据而不需要太多的HTML属性。另一个好处是数据通过JSON编码进行转义，避免了包含双引号（"）的变量可能导致DOM混乱的潜在错误。
通常，要将php变量传递给vue，我会这样做：
<component-name :prop-name='@json($variable)'></component-name>
laravel标签，显然{{ $client->id }}是由Laravel的blade模板引擎使用的语法，这里做出的假设完全正确。 - dbfclient-id="{{ $client->id }}"而不是clientId="{{ $client->id }}"。我没有看到client-id的任何地方，只有clientId。 - Ibrahim MohamedclientId属性可以在Vue端接受，也可以在HTML端使用kebab-caseclient-id传递值。在此处阅读更多信息：https://v2.vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case - Mustafa Ehsan Alokozay