Laravel 9 Blade无法向Vue 3组件传递数据求助

我在Vue 2中可成功实现Laravel 9 Blade向组件传递数据，但切换到Vue 3后该功能失效，恳请提供帮助。

相关代码 #

Vue组件代码（test.vue） #

<template>
    <p class="text-blue-600">The quick brown fox...</p>
            
    <div class="inline-flex justify-between w-full">
        <h1>{{ nodeGroups }} Hi</h1>
    </div>
</template>

<script>
export default{
    props:['nodeGroups'],

    mounted () {
        console.dir(this.nodeGroups)
    }
}
</script>

Vue实例挂载代码 #

import { createApp } from "vue";
import Welcome from "./components/test.vue";
createApp(Welcome).mount("#app");

Laravel Blade代码 #

<div id="app">
    <Welcome :nodeGroups="'abc'"></Welcome>
</div>

问题原因 #

Vue 3的挂载逻辑和Vue 2存在差异：你当前直接把Welcome组件作为根组件挂载到#app，这会导致#app内的Blade代码（包括<Welcome>标签）被根组件的模板完全替换，Blade里的传参自然无法生效。

解决办法 #

1. 修改Vue挂载代码，注册全局组件 #

将挂载代码改为先创建空的根应用，再注册Welcome组件，最后挂载：

import { createApp } from "vue";
import Welcome from "./components/test.vue";

// 创建空的根应用实例
const app = createApp({});
// 全局注册Welcome组件
app.component('Welcome', Welcome);
// 挂载到#app元素
app.mount("#app");

2. 可选：规范组件Props定义（非必须，但更健壮） #

可以将组件的props从数组形式改为对象形式，增加类型校验：

export default{
    props: {
        nodeGroups: {
            type: String,
            required: false, // 根据需求设置是否必填
            default: ''
        }
    },

    mounted () {
        console.dir(this.nodeGroups)
    }
}

3. 传参注意事项 #

• 如果传递字符串字面量，可以去掉冒号直接写：nodeGroups="abc"，或者保留冒号用单引号包裹（你当前的写法:nodeGroups="'abc'"是正确的）。
• 如果传递PHP变量，可以用Blade语法绑定：:nodeGroups="{{ $yourPhpVariable }}"

这样修改后，Blade中的<Welcome>标签就能被Vue正确解析，传递的nodeGroups参数也能在组件中正常接收和使用。

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