Javascript Vue.js：检查组件是否存在
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37389788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js: check if a component exists
提问by vivoconunxino
I need to do some stuff in the ready:of the root instance only when some components don't exist (they weren't declared in the HTML).
ready:仅当某些组件不存在（它们未在 HTML 中声明）时，我才需要在根实例中做一些事情。
How can I check if a component exists?
如何检查组件是否存在？
采纳答案by vivoconunxino
I really hope there is a better answer than this, but for the moment this solves the problem.
我真的希望有比这更好的答案，但目前这解决了问题。
In the ready, I access the children elements through this(could be also Vue) and check whether their name is or not what I was expecting:
准备就绪后，我通过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
}
}
}
You can also access them directly if you previously assigned them a reference in their template: //template:
如果您之前在其模板中为它们分配了引用，您也可以直接访问它们：//template:
<comp v-ref:my_component_ref></comp>
Then from the Vue component ready:
然后从 Vue 组件准备好：
if (this.$refs.my_component_ref){
//do stuff
}
回答by Hashem Qolami
We can get the list of the loaded (global and/or local) components of a Vue instance from the instantiation options which is available through the vm.$optionswhere the vmis the current Vue instance.
我们可以通过获得从化选项一个Vue公司的实例是可用的加载（全球和/或本地）的组件列表vm.$options，其中vm是当前Vue的实例。
vm.$optionsproperty holds the whole options of a Vue instance. For example vm.$options.componentsreturns an object containing the loaded components of the current Vue instace vm.
vm.$options属性包含 Vue 实例的全部选项。例如，vm.$options.components返回一个包含当前 Vue instace 已加载组件的对象vm。
However depending on the way how a component is registered, either globally through Vue.component()or locally within a Vue instance options, the structure of the vm.$options.componentswould be different.
然而，根据组件的注册方式，无论是通过Vue 实例 options全局注册Vue.component()还是本地注册， 的结构vm.$options.components都会有所不同。
If the component is registered globally, the component will be added to vm.$options.components[[Prototype]] linkage or its __proto__.
如果组件是全局注册的，组件将被添加到vm.$options.components[[Prototype]] 链接或其__proto__.
And if the component is registered locally within the Vue instance options, the component will be added to the vm.$options.componentsobject directly as its own property. So that we do not have to walk the proto chain to find the component.
如果组件在 Vue 实例选项中本地注册，则组件将vm.$options.components作为其自己的属性直接添加到对象中。这样我们就不必走原始链来找到组件。
In the following example we will see how to access the loaded components in both situations.
在下面的示例中，我们将看到如何在两种情况下访问加载的组件。
Notice the // [1]and // [2]comments in the code which are related to local registered 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><global-child></code> component is loaded: <strong>{{ globalComponentIsLoaded }}</strong></p>
<global-child></global-child>
<local-child></local-child>回答by Glycerine
I'm not sure if you need a dynamic method, but this may help to determine if a component exists:
我不确定您是否需要动态方法，但这可能有助于确定组件是否存在：
Vue.options.components['CompOne']
found:
成立：
回答by Al-Amin
get the current component imported components
获取当前组件导入的组件
this.$options.components[findComponentName]
get the global components
获取全局组件
Vue.$options.components[findComponentName]
回答by Shiva127
To check if a global component exists:
检查全局组件是否存在：
let componentExists = 'componentName' in Vue.options.components
To check if a imported component exists in a component:
要检查组件中是否存在导入的组件：
let componentExists = 'componentName' in this.$options.components
回答by KhaledDev
var isComponentExists = "component-name" in Vue.options.components
