Vue3组件传参报错：Missing required prop 'msg' 问题排查

核心问题 #

你当前的挂载方式无法将DOM元素上的msg属性自动转换为Vue3组件的props。当使用createApp(HelloWorld).mount("wvd-hello-world")时，Vue3只会将目标DOM作为挂载容器，不会自动读取该DOM上的属性并传递给组件。

解决方法 #

需要手动提取DOM元素上的属性值，在创建应用时通过props选项显式传递给组件：

修改main.ts代码如下：

import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

// 获取所有目标元素（支持多个组件实例）
const elements = document.querySelectorAll("wvd-hello-world");

elements.forEach(el => {
  // 提取DOM上的msg属性值
  const msg = el.getAttribute('msg');
  // 创建应用并传递props
  createApp(HelloWorld, {
    msg: msg
  }).mount(el);
});

补充说明 #

• 若组件有多个props，可批量提取DOM属性并组装成props对象传递
• 若props是驼峰命名（如userName），HTML中会被自动转为短横线格式（user-name），提取时需要对应转换，或者直接在组件中用短横线命名props

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