Vue3结合Rails项目createApp向组件传props异常问题咨询

• Vue3的createApp函数仅支持两个入参：第一个为根组件实例，第二个为要传递给根组件的props数据，你错误地将props声明、props数据拆成了第二、第三个参数传入，导致组件接收到的props为空。

main.js 修改后代码 #

const element = document.getElementById("invoice_app")
const data = JSON.parse(element?.getAttribute('data') || '')

console.log(data); // 输出 {id: 'A-00014'}
if (element != null) {
    const app = createApp(
      DragDropZone, // 根组件
      // 直接传入所有要给根组件的props即可，props规则已经在组件内部定义
      {
        id: data.id
      }
    ).mount('#invoice_app');
}

DragDropZone组件代码无需修改，现有定义已经符合要求 #

export default {
  props: {
    id: String,
  },
  setup(props) {
    console.log(props); // 此时会正确输出 {id: 'A-00014'}
    // 后续业务逻辑
  }
}

• 如果你要传递的props较多，可以直接把解析后的data整体传入，不需要逐个拆字段：

createApp(DragDropZone, data).mount('#invoice_app')

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