如果未定义组件，则使 Vue 不会抛出错误

Question

我正在开发一个具有可选子组件的组件。

<template>
  <div>
     <child-component :propA="valueOfA"/> <!-- this child will certainly appear -->

     <optional-child-component :propB="valueOfB" /> <!-- this child may not appear -->
  </div>
</template>

这是针对我正在开发的库。 optional-child-component 来自我图书馆的用户可能想要使用的第 3 方库。如果他们不想，我不会强迫他们安装 3rd-party 库。问题是，目前，如果没有安装 3rd-party 库，那么 Vue 会抛出一个错误，说 optional-child-component 没有定义。

鉴于此组件可能未定义/注册，如何在我的代码中包含可选组件？

Answer 1

不确定这是否是最好的方法，但您可以查看$options.components 以查看哪些组件已注册。

在下面的示例中，有 3 个子组件。其中一个在全球注册，一个在本地注册，第三个根本没有注册。第三个组件不会被渲染。

Vue.component('comp-a', { template: `<div>a</div>` })

new Vue({
  el: '#app',
  
  components: {
    'comp-b': {
      template: `<div>b</div>`
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <comp-a v-if="$options.components['comp-a']"></comp-a>
  <comp-b v-if="$options.components['comp-b']"></comp-b>
  <comp-c v-if="$options.components['comp-c']"></comp-c>
</div>

这里可能有一个复杂的情况，例如kebab-case vs PascalCase，但我怀疑这将是让它发挥作用的不可逾越的障碍。