Vue3集成ASP.NET MVC时Props无法传递的问题求助

1. 检查组件Props的定义方式 #

Vue3中选项式API的props定义和Vue2基本兼容，但如果使用组合式API的defineProps，需确保写法正确：

• 选项式写法：

export default {
  props: {
    userId: {
      type: Number,
      default: 0
    }
  }
}

• 组合式API写法：

import { defineProps } from 'vue'
const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
})

避免混用两种写法，比如在组合式组件中仍保留选项式的props字段，可能导致识别异常。

2. 确认挂载时的Props传递逻辑 #

Vue3与Vue2在根组件props传递上存在细节差异，需对应调整：

错误示例（Vue2习惯写法，Vue3不生效） #

// Vue2旧写法
new Vue({
  el: '#app',
  props: ['userId']
})

对应MVC视图：

<div id="app" data-user-id="@Model.UserId"></div>

Vue3正确写法1：显式传入props至createApp #

先获取MVC渲染的属性值，再传递给根组件：

// 从DOM元素提取MVC渲染的属性
const appEl = document.getElementById('app')
const userId = parseInt(appEl.dataset.userId)
// 挂载时传入props
createApp(MyComponent, { userId }).mount('#app')

Vue3正确写法2：通过元素绑定传递props #

如果MVC视图允许使用Vue指令，可直接在挂载元素上绑定属性：

<div id="app" :user-id="@Model.UserId"></div>

注意：Vue3中根组件必须显式定义对应props，否则无法自动接收元素上的绑定属性。

3. 验证DOM属性的命名转换 #

Vue3依然保留kebab-case属性到camelCase props的自动转换规则，但通过dataset获取属性时需注意：DOM元素的data-user-id对应dataset.userId，需确保取值时命名正确。

4. 排查全局配置干扰 #

如果项目中存在全局混入、app.config.globalProperties定义了与props同名的属性，可能会覆盖传入的props值。可暂时移除全局配置，测试是否恢复正常。

5. 调试确认props实际接收值 #

在组件中添加调试代码，确认props是否正确传入：

• 选项式API：

export default {
  props: ['userId'],
  mounted() {
    console.log('Received userId:', this.userId)
  }
}

• 组合式API：

import { defineProps, onMounted } from 'vue'
const props = defineProps(['userId'])
onMounted(() => {
  console.log('Received userId:', props.userId)
})

若控制台打印默认值，说明props未正确传递，需回溯挂载步骤；若打印正确值但页面显示异常，需检查模板中变量名是否写错。

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