Vue.js: 检查组件是否存在

Question

仅当某些组件不存在时（它们未在 HTML 中声明），我才需要在根实例的 ready: 中执行一些操作。

如何检查组件是否存在？

Answer 1

我们可以从实例化选项中获取 Vue 实例的已加载（全局 and/or 本地）组件列表，该选项可通过 vm.$options 获得，其中 vm 是当前 Vue 实例。

vm.$options 属性包含 Vue 实例的全部选项。例如 vm.$options.components returns 包含当前 Vue 实例加载组件的对象 vm.

然而，根据组件注册方式的不同，无论是通过 Vue.component() or locally within a Vue instance options 全局注册，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>

Answer 2

我真的希望有比这更好的答案，但目前这解决了问题。

准备好后，我通过 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
}

Answer 3

我不确定您是否需要动态方法，但这可能有助于确定组件是否存在：

Vue.options.components['CompOne']

找到：

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

Answer 4

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

Answer 5

获取当前组件导入组件

this.$options.components[findComponentName]

获取全局组件

Vue.$options.components[findComponentName]

Answer 6

检查全局组件是否存在：

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

检查组件中是否存在导入的组件：

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

Vue.js: 检查组件是否存在

Vue.js: check if a component exists

javascript

vue.js