Vue.js: проверьте, существует ли компонент

Ответ 1

Я действительно надеюсь, что есть лучший ответ, чем этот, но на данный момент это решает проблему.

В готовом я обращаюсь к элементам children через this (также может быть Vue) и проверять, есть ли их имя или нет, что я ожидал:

    ready: function() {

        for (var i = 0; i < this.$children.length; i++) {
            if (
                   this.$children[i].$options.name == 'my_component_a'
                || this.$children[i].$options.name == 'my_component_b'
                || this.$children[i].$options.name == 'my_component_c'
            ) {
                //do stuff
            }
        }
    }

Вы также можете получить к ним доступ напрямую, если ранее назначили им ссылку в своем шаблоне: // шаблон:

<comp v-ref:my_component_ref></comp>

Затем из готового компонента Vue:

if (this.$refs.my_component_ref){
//do stuff
}

Ответ 2

Мы можем получить список загруженных (глобальных и/или локальных) компонентов экземпляра Vue из опций создания экземпляров, которые доступны через vm.$options, где vm - текущий экземпляр Vue.

vm.$options свойство содержит все опции экземпляра Vue. Например, vm.$options.components возвращает объект, содержащий загруженные компоненты текущего Vue instace vm.

Однако в зависимости от способа регистрации компонента глобально через Vue.component() или локально внутри опций экземпляра Vue, структура vm.$options.components будет отличаться.

Если компонент зарегистрирован глобально, компонент будет добавлен в ссылку vm.$options.components [[Prototype]] или его __proto__.

И если компонент зарегистрирован локально внутри опций экземпляра Vue, компонент будет добавлен к объекту vm.$options.components непосредственно как его собственное свойство. Так что нам не нужно прокладывать прото-цепочку, чтобы найти компонент.

В следующем примере мы увидим, как получить доступ к загруженным компонентам в обеих ситуациях.

Обратите внимание на комментарии // [1] и // [2] в коде, которые связаны с локальными зарегистрированными компонентами.

// the globally registered component
Vue.component('global-child', {
  template: '<h2>A message from the global component</h2>'
});

var localComponent = Vue.extend({ template: '<h2>A message from the local component</h2>' });


// the root view model
new Vue({
  el: 'body',
  data: {
    allComponents: [],
    localComponents: [],
    globalComponentIsLoaded: false
  },
  // local registered components
  components: { // [1]
    'local-child': localComponent
  },
  ready: function() {    
    this.localComponents = Object.keys(this.$options.components); // [2]
    
    this.allComponents = loadedComponents.call(this);
    this.globalComponentIsLoaded = componentExists.call(this, 'global-child');
  }
});

function loadedComponents() {
  var loaded = [];
  var components = this.$options.components;
  for (var key in components) {
    loaded.push(key);
  }
  return loaded;
}

function componentExists(component) {
  var components = loadedComponents.call(this);
  if (components.indexOf(component) !== -1) {
    return true;
  }
  return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
<h1>A message from the root Vue instance</h1>
<p>All loaded components are: {{ allComponents | json }}</p>
<p>local components are: {{ localComponents | json }}</p>
<p><code>&lt;global-child&gt;</code> component is loaded: <strong>{{ globalComponentIsLoaded }}</strong></p>
<global-child></global-child>
<local-child></local-child>

Ответ 3

Я не уверен, если вам нужен динамический метод, но это может помочь определить, существует ли компонент:

Vue.options.components['CompOne']

найденный:

https://github.com/vuejs/Discussion/issues/140

Ответ 4

var isComponentExists = "component-name" in Vue.options.components

Ответ 5

получить текущий компонент импортированных компонентов

this.$options.components[findComponentName]

получить глобальные компоненты

Vue.$options.components[findComponentName]

Ответ 6

Чтобы проверить, существует ли глобальный компонент:

let componentExists = 'componentName' in Vue.options.components

Чтобы проверить, существует ли импортированный компонент в компоненте:

let componentExists = 'componentName' in this.$options.components