Vue子组件等待道具

Question

我有一个父组件，该组件将一个prop（selectedOption）传递给子组件，而子组件则采用该prop并基于该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>