Vue子组件等待道具

Question

我有一个将组件（property）（selectedOption）传递给子组件的父组件，该子组件采用该道具并基于该道具渲染图标。但是每次加载页面时，子组件都会引发错误，因为prop没有及时传递，但是在传递所有内容后的一秒钟就可以了。如何避免这种情况？

父级（Settings.vue）：

<template>
    <settings-menu
      :selectedOption="selectedSettingsOption">
    </settings-menu>

子（SettingsMenu.vue）：

<template>
  <component
    :is="`icon-${ selectedOption }`">
  </component>
</template>

Answer 1

只需放置一个v-if隐藏组件，直到道具通过。

<template>
  <component
    v-if='selectedOption' :is="`icon-${ selectedOption }`">
  </component>
</template>