vue3 父组件的 provide 可能未定义， 导致injec

报错代码大致如下

<template>
  <div class="ui-top-msg" :style="[PageListLayoutData ? 'margin-left: -12px;' : '']">
    <!-- <div class="ui-top-msg-icon">
        <slot name="icon"><img :src="icon"/></slot>
    </div> -->
    <div class="ui-top-msg-title">{{title}}</div>
    <div class="ui-top-msg-msg">{{msg}}</div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'TopMsg',
})
defineProps({
  icon: {
    type: String,
  },
  title: String,
  msg: String,
})

const PageListLayoutData = inject('PageListLayout') // 获取父组件的数据属性

</script>

[Vue warn]: injection "pageListLayout" not found.

50743ce21af199a18cbe1f710cdf206.png

解决办法给 inject指定一个默认值