Laravel Blade向Vue3组件传递props始终为undefined问题求助

核心问题 #

你代码的问题出在Vue3实例的初始化逻辑错误：直接将Demo组件作为根组件传入createApp，挂载到#app节点时，会直接覆盖掉Blade渲染在#app节点内的所有内容，你写在Blade里的<demo test="fsdf"></demo>标签根本不会被Vue解析，自然拿不到传入的props值。

修复步骤 #

1. 修改app.js代码 #

将原来直接以Demo为根组件初始化的逻辑，改为先创建空应用实例，全局注册Demo组件后再挂载，这样Vue会解析#app内已有的Blade渲染内容，识别自定义组件并读取传入的属性：

import {createApp} from 'vue';
import Demo from './components/Demo.vue';

// 创建空的根应用实例
const vue3App = createApp({});
// 全局注册Demo组件，组件名对应Blade里使用的<demo>标签名
vue3App.component('demo', Demo);
// 挂载到#app节点
vue3App.mount('#app');

2. 额外注意事项 #

HTML属性不区分大小写，如果你需要传递驼峰命名的props，比如props名为testData，Blade中需要写成短横线分隔的格式：

<demo test-data="测试内容"></demo>

Vue会自动将短横线格式的属性名转换为驼峰格式匹配组件内定义的props。

验证效果 #

修改完成后重新执行npm run dev编译前端资源，刷新页面后Demo组件的setup中就能正常打印出test属性的值fsdf。

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