如何在运行时检查的Vue成分的类型？

Question

我有一个组件tab-panel和一个组件tab，需要确保tabs仅在tab-panel内部时才呈现。

我如何检查父级的类型以强制执行此操作？

Answer 1

您可以通过this.$parent.$options.name检查父组件的名称。

这里是示例

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('tab', {
  template: `<div>tab</div>`,
  created() {
    if (this.$parent.$options.name !== 'tab-panel') {
      throw new Error('tab must be in tab-panel!')
    } else {
      console.log('tab is in tab-panel :)')
    }
  }
})

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

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <tab-panel></tab-panel>
  <tab></tab>
</div>