Заставьте 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 взято из сторонней библиотеки, которую пользователи моей библиотеки могут захотеть использовать. Я не буду заставлять их устанавливать сторонние библиотеки, если они этого не хотят. Проблема в том, что в настоящее время, если сторонняя библиотека не установлена, 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>

Здесь может быть осложнение, например, дело с шашлыком против PascalCase, но я сомневаюсь, что это станет непреодолимым препятствием для того, чтобы заставить это работать.