Laravel10+Vue3+Vite环境下Blade变量无法传递至Vue组件

使用Laravel 10、Vue 3和Vite开发项目时，尝试将Blade模板中的$user变量传递到Vue组件，但组件始终无法获取该变量，以下是尝试过的代码及最终解决方案。

初始尝试代码 #

Blade模板文件 #

@extends('layouts.app')

@section('title', 'Manage Users')

@section('content')
    <div class="container-fluid">
        <div id="user-edit">
            <user-edit :user="{{ json_encode($user) }}"></user-edit>
        </div>
    </div>

    @vite('resources/js/admin/users/users.js')
@endsection

Vue组件（UserEdit.vue） #

<template>
    <div style="width: 100%" class="p-5">
        {{ user.name }}
    </div>
</template>

<script>
export default {
    props: ['user'],
    mounted() {
        console.log('mounted', this.user);
    }
}
</script>

users.js #

import { createApp } from 'vue';
import VueCookies from 'vue-cookies';
import i18n from '../../../lang/index';
import Index from './Index.vue';
import UserEdit from './UserEdit.vue';

const app = createApp(Index);
const app2 = createApp(UserEdit);

app.use(VueCookies);
app.use(i18n);
app.config.devtools = true
app.mount('#user-app');

app2.mount('#user-edit');
app2.use(VueCookies);
app2.use(i18n);
app2.config.devtools = true

后续修改尝试代码 #

更新后的Blade模板 #

@extends('layouts.app')

@section('title', 'Manage Users')

@section('content')
    <app>
        <div class="container-fluid">
            <div id="user-edit">
                <user-edit :user="{{ json_encode($user) }}"></user-edit>
            </div>
        </div>
    </app>

    @vite('resources/js/admin/users/users.js')
@endsection

App.vue #

<template>
    <div id="app">
        <slot></slot>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log('mounted app');
    }
}
</script>

更新后的app.js #

import "./bootstrap"
import "~public/vendor/jquery/jquery";
import "~public/vendor/bootstrap/js/bootstrap.bundle";
import "overlayscrollbars";
import "~vend/almasaeed2010/adminlte/dist/js/adminlte";

import {createApp} from "vue";
import App from "./App.vue";
const app = createApp(App);

import users from "../js/admin/users/users.js";
app.use(users);

更新后的users.js #

import UserEdit from "./UserEdit.vue";
export default {
    install: (app) => {
        app.component('user-edit', UserEdit);
    }
}

问题原因与解决方案 #

核心问题 #

1. props传递格式错误：Blade中json_encode($user)输出的是JSON对象，但用双引号包裹后，Vue会将其解析为字符串而非对象，导致组件无法正确接收。
2. Vue实例挂载逻辑错误：初始写法中直接将UserEdit作为根实例挂载到#user-edit，而Blade中的<user-edit>标签在该容器内，相当于Vue直接替换了整个容器，props未被正确传递；后续修改中实例挂载与组件注册的逻辑衔接有误。

具体修复步骤 #

1. 修正Blade中的props传递

使用Laravel内置的@json指令确保输出合法的JavaScript对象，避免引号冲突：

<user-edit :user='@json($user)'></user-edit>

或直接去掉引号（json_encode已输出对象字面量）：

<user-edit :user={{ json_encode($user) }}></user-edit>

2. 统一Vue实例挂载逻辑

删除冗余的users.js模块，在主app.js中直接注册全局组件并挂载：

import "./bootstrap"
import "~public/vendor/jquery/jquery";
import "~public/vendor/bootstrap/js/bootstrap.bundle";
import "overlayscrollbars";
import "~vend/almasaeed2010/adminlte/dist/js/adminlte";

import { createApp } from "vue";
import App from "./App.vue";
import UserEdit from "../js/admin/users/UserEdit.vue";

const app = createApp(App);
// 注册全局组件
app.component('user-edit', UserEdit);
// 挂载到Blade中的<app>标签
app.mount('app');

3. 简化Blade结构

移除多余的#user-edit容器，确保组件在Vue实例挂载的根元素内：

@extends('layouts.app')

@section('title', 'Manage Users')

@section('content')
    <app>
        <div class="container-fluid">
            <user-edit :user='@json($user)'></user-edit>
        </div>
    </app>

    @vite('resources/js/app.js')
@endsection

4. 优化组件props校验

为组件props添加类型校验，便于排查数据类型问题：

<template>
    <div style="width: 100%" class="p-5">
        {{ user.name }}
    </div>
</template>

<script>
export default {
    props: {
        user: {
            type: Object,
            required: true
        }
    },
    mounted() {
        console.log('mounted', this.user);
    }
}
</script>

额外排查点 #

• 检查浏览器控制台是否有JSON格式错误、组件未注册等报错信息；
• 在Blade中用{{ dd($user) }}确认$user变量存在且结构正确；
• 重启Vite服务或清除浏览器缓存，避免缓存导致的代码未更新问题。

内容的提问来源于stack exchange，提问作者Starla