如何处理尚未赋值的Vue组件props？

开发者阿泽

2026-6-22

解决Vue组件中null属性访问报错的几种方案

针对你遇到的componentData为null时访问symbol属性报错的问题，这里有几种实用的解决方式：

1. 使用可选链操作符（?.）

这是最简洁的方案，直接在模板中通过?.安全访问属性，当componentData为null或undefined时，表达式会返回undefined，不会抛出错误，模板中会显示为空：

<template>
  <div>
    {{ componentData?.symbol }}
  </div>
</template>

<script setup>
const props = defineProps({
  componentData: {
    type: [Object, null],
    required: true
  }
})
</script>

2. 三元表达式设置默认值

如果需要在componentData为null时显示自定义默认内容，可以用三元表达式：

<template>
  <div>
    {{ componentData ? componentData.symbol : '默认值' }}
  </div>
</template>

<script setup>
const props = defineProps({
  componentData: {
    type: [Object, null],
    required: true
  }
})
</script>

3. 计算属性封装安全访问逻辑

如果后续需要对symbol做更多处理，或者想让模板更简洁，可以用计算属性封装安全访问逻辑：

<template>
  <div>
    {{ safeSymbol }}
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  componentData: {
    type: [Object, null],
    required: true
  }
})

const safeSymbol = computed(() => {
  return props.componentData?.symbol || ''
})
</script>

这三种方案都能保证组件始终渲染的同时避免报错，你可以根据实际需求选择：