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>

这里的情况可能很复杂，例如kebab-case vs PascalCase，但我怀疑这将是使其无法工作的不可克服的障碍。

如果未定义组件，则使Vue不引发错误

1 个答案: