Vue.js 父组件向子组件DashboardCard传递props val、icon失效如何解决？

根因定位 #

该报错属于Vue组件props初始化阶段异常，DevTools中显示的props正常为组件渲染完成后的最终状态，报错由组件初始化阶段的props异常触发。

对应原因及解决方法 #

• 异步数据源导致初始化值为空
  父组件传递的val、icon如果是接口请求等异步获取的数值，组件初始化时异步请求未返回，props值为undefined触发报错，后续请求完成props更新后DevTools显示正常。
  解决方法：

1. 父组件增加条件渲染，异步数据返回后再挂载子组件

<DashboardCard v-if="val && icon" :val="val" :icon="icon" />

2. 子组件props声明时设置兜底默认值

// Vue2 props声明示例
export default {
  props: {
    val: {
      type: [Number, String],
      default: 0
    },
    icon: {
      type: String,
      default: ''
    }
  }
}

// Vue3 setup语法糖示例
const props = defineProps({
  val: {
    type: [Number, String],
    default: 0
  },
  icon: {
    type: String,
    default: ''
  }
})

• Vue3中直接解构props丢失响应性
  如果使用Vue3 setup语法糖，直接对props对象解构会破坏响应性，且初始化时的空值会被固化无法随props更新。
  错误写法：

const { val, icon } = defineProps(['val', 'icon'])

正确写法：

import { toRefs } from 'vue'
const props = defineProps(['val', 'icon'])
const { val, icon } = toRefs(props)
// 后续访问需取value属性：console.log(val.value)

• prop命名规范不匹配
  Vue模板中传递prop需使用短横线命名，子组件JS中声明需使用驼峰命名，需保证二者命名对应：
  父组件传值示例：

<DashboardCard :card-val="val" :card-icon="icon" />

子组件props声明示例：

props: ['cardVal', 'cardIcon']

排查方式 #

在子组件的created（Vue2）或onMounted（Vue3）生命周期钩子中打印props全量对象，可获取组件初始化阶段的真实props值，和DevTools最终状态对比即可定位问题点。

内容的提问来源于stack exchange，提问作者Tâm Đỗ