Vue引入Vuetify弹窗组件读props报null错误，如何消除控制台警告

父组件初始状态下tipDetails的取值为null，即使此时弹窗处于关闭状态，Vue的渲染流程仍会先完成子组件TipDetailsDialog的模板编译。子组件模板中直接读取tip.test、tip.test2时，由于tip本身是null，就会触发“无法读取null的属性”的报错。等点击列表项为tipDetails赋值后，弹窗内容正常渲染，因此实际展示效果不受影响，但渲染初期的报错已经触发。

方案1：模板读取属性时增加空值兼容 #

直接修改子组件中读取tip属性的表达式，避免在tip为null时触发属性访问报错。两种适配不同项目场景的写法：

• 支持可选链语法的项目可直接写为：

<v-col cols="6">
  <v-card>
    {{ tip?.test }}
  </v-card>
</v-col>
<v-col cols="6">
  <v-card>
    {{ tip?.test2 }}
  </v-card>
</v-col>

• 若项目不支持可选链语法，可使用三元判断兜底：

<v-col cols="6">
  <v-card>
    {{ tip ? tip.test : '' }}
  </v-card>
</v-col>
<v-col cols="6">
  <v-card>
    {{ tip ? tip.test2 : '' }}
  </v-card>
</v-col>

方案2：弹窗内容按需渲染 #

利用已有的dialog状态控制弹窗内部内容的渲染时机，从根源上避免弹窗关闭时执行空值读取逻辑。给弹窗内的内容容器加上v-if="dialog"判断：

<v-container v-if="dialog">
  <v-row>
    <v-col cols="6">
      <v-card>
        {{ tip.test }}
      </v-card>
    </v-col>
    <v-col cols="6">
      <v-card>
        {{ tip.test2 }}
      </v-card>
    </v-col>
  </v-row>
</v-container>

该方案在弹窗关闭阶段不会生成内部内容的DOM，既不会触发空值报错，也能减少不必要的初始渲染开销。

方案3：优化props默认值定义 #

从组件入参层面避免tip为null的情况，将子组件的数组式props定义改为对象式定义，补充类型校验和默认值：

export default {
  name: "TipDetailsDialog",
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    tip: {
      type: Object,
      default: () => ({})
    }
  }
};

修改后即使父组件传入的tip为null，子组件接收的tip也会默认解析为空对象，读取不存在的属性时只会返回undefined，不会触发null属性访问的报错。

以上方案可结合使用，进一步提升代码的健壮性。

内容的提问来源于stack exchange，提问作者Lidia K.