假设如下示例：

<template>  
    <radar v-bind:items="result.radar"/>  
</template>  
  
<script>  
    import Radar from "./Radar";  
    export default {  
        props: {  
            result: Object,  
        },  
        components: {  
            Radar  
        },  
    }  
</script>

假设我 data 传递 null or {} or undefined 时， data.radar 会报错，请问这种情况有什么好的解决方案吗？难道必须通过 data(){} 将 result 数据平铺赋值吗？

错误提示信息：

Error in render: "TypeError: Cannot read property 'radar' of undefined"

做个判断如何?

<radar :items="(result && result.rada)??result"/>  

最优方案是设默认对象，Object可通过工厂函数返回默认值

props: {
  result: {
    type: Object,
    default: () => ({radar: ''}),
  },
},

1. 模版里使用 v-if 判断，空值就显示成别的样式。这样做一般用户体验也比较好。

2. 一定要有初始值的话，可以用 computed，然后模版里只用计算后的。比如：

   export default {
     props: {
       radar: {
         type: Object,
         default: null,
       },
     },
     computed: {
       localRadar() {
         return this.radar || this.createDefaultRadar();
       },
     },
   }