javascript - vuejs - vuetify

Vue.js: comprueba si existe un componente

Question

Necesito hacer algunas cosas en la ready: de la instancia raíz solo cuando algunos componentes no existen (no fueron declarados en el HTML).

¿Cómo puedo verificar si existe un componente?

Answer 1

No estoy seguro de si necesita un método dinámico, pero esto puede ayudar a determinar si existe un componente:

Vue.options.components[''CompOne'']

encontró:

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

Answer 2

Podemos obtener la lista de los componentes cargados (globales y / o locales) de una instancia de Vue a partir de las opciones de instanciación que están disponibles a través de vm.$options donde vm es la instancia actual de Vue.

vm.$options propiedad vm.$options contiene todas las opciones de una instancia de Vue. Por ejemplo, vm.$options.components devuelve un objeto que contiene los componentes cargados del vue instace vm actual.

Sin embargo, dependiendo de la forma en que se registra un componente, ya sea globalmente a través de Vue.component() o localmente dentro de las opciones de una instancia de Vue , la estructura de los vm.$options.components sería diferente.

Si el componente se registra globalmente, el componente se agregará a vm.$options.components [[Prototype]] linkage o su __proto__ .

Y si el componente se registra localmente dentro de las opciones de instancia de Vue, el componente se agregará al objeto vm.$options.components directamente como su propia propiedad. Para que no tengamos que caminar la cadena de proto para encontrar el componente.

En el siguiente ejemplo, veremos cómo acceder a los componentes cargados en ambas situaciones.

Observe los comentarios // [1] y // [2] en el código que están relacionados con los componentes locales registrados.

// 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>

Answer 3

Realmente espero que haya una mejor respuesta que esta, pero por el momento esto resuelve el problema.

En la lista, accedo a los elementos secundarios a través de this (podría ser también Vue ) y verifico si su nombre es o no lo que esperaba:

    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
            }
        }
    }

También puede acceder a ellos directamente si previamente les asignó una referencia en su template: // plantilla:

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

Luego, desde el componente Vue listo:

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