Javascript 如何测试具有特定名称的组件是否在Composition API（Vue 3）中注册

我有一个通过名称加载动态组件的模板：

getFormRenderer

返回按名称标识组件的字符串（它来自API）

导入并注册所有可能的子组件（在本例中，仅

电报发送消息

和

时间

）：

从“vuex”导入{useStore}；
从“vue”导入{computed}；
从“@/components/forms/exampleComponentOne.vue”导入exampleComponentOne；
从“@/components/forms/exampleComponentTwo.vue”导入exampleComponentTwo；
从“@/components/forms/defaultComponent.vue”导入defaultComponentTwo；
导出默认值{
名称：“ActionEditor”，
设置（）{
const store=useStore（）；
const getFormRenderer=计算（（）=>{
返回(
store.state.level.actionSelected.plugin
);
});
返回{
getFormRenderer，
};
},
组成部分：{
例如组件一，
例二,，
默认组件
},
};

现在我想修改动态

，如果getFormRenderer返回一个不存在的组件名，那么它将默认为

defaultComponent.vue

但我找不到任何方法来实现这一点。我曾想过使用这个.hasOwnProperty（），但在setup（）的内部，这个属性是未定义的

---

有没有标准的方法可以做到这一点？

要测试应用程序中是否全局注册了具有特定名称的组件，您可以使用只传递第一个参数（组件名称）的函数

要在应用程序中的任何组件中实现这一点，您可以使用（文档很少）函数-此函数只能在

setup

或hook中调用，并且您可以使用其返回值来测试组件是否已注册

对于全局组件，请使用

getCurrentInstance（）.appContext.app.component（）

函数（其中

appContext.app

属性表示使用

createApp（）创建的主
app
对象）

对于本地注册的组件，请使用

getCurrentInstance（）。组件['name']

有关全局组件，请参见下面的示例（请注意，示例使用的是来自CDN的Vue，因此它使用的是全局Vue对象。在正常开发中，您使用导入-例如

import{getCurrentInstance}来自“Vue”

）

const-app=Vue.createApp（{}）
应用组件（“主组件”{
模板：`
`,
安装程序（）{
const vm=Vue.getCurrentInstance（）
//控制台日志（vm）
const getComp1OrDefault=Vue.computed（（）=>{
返回vm.appContext.app.component（'comp1'）？'comp1'：'defaultComp'`
});
const getComp2OrDefault=Vue.computed（（）=>{
返回vm.appContext.app.component（'comp2'）？'comp2'：'defaultComp'`
});
返回{
GetComp1OrderFault，
GetComp2OrderFault
};
}
})
附件组件（“组件1”{
模板：`Comp1`
})
应用程序组件（'defaultComp'{
模板：`defaultComp`
})
应用程序安装（“应用程序”）

---

要测试应用程序中是否全局注册了具有特定名称的组件，可以使用只传递第一个参数（组件名称）的函数

要在应用程序中的任何组件中实现这一点，您可以使用（文档很少）函数-此函数只能在

setup

或hook中调用，并且您可以使用其返回值来测试组件是否已注册

对于全局组件，请使用

getCurrentInstance（）.appContext.app.component（）

函数（其中

appContext.app

属性表示使用

createApp（）创建的主
app
对象）

对于本地注册的组件，请使用

getCurrentInstance（）。组件['name']

有关全局组件，请参见下面的示例（请注意，示例使用的是来自CDN的Vue，因此它使用的是全局Vue对象。在正常开发中，您使用导入-例如

import{getCurrentInstance}来自“Vue”

）

const-app=Vue.createApp（{}）
应用组件（“主组件”{
模板：`
`,
安装程序（）{
const vm=Vue.getCurrentInstance（）
//控制台日志（vm）
const getComp1OrDefault=Vue.computed（（）=>{
返回vm.appContext.app.component（'comp1'）？'comp1'：'defaultComp'`
});
const getComp2OrDefault=Vue.computed（（）=>{
返回vm.appContext.app.component（'comp2'）？'comp2'：'defaultComp'`
});
返回{
GetComp1OrderFault，
GetComp2OrderFault
};
}
})
附件组件（“组件1”{
模板：`Comp1`
})
应用程序组件（'defaultComp'{
模板：`defaultComp`
})
应用程序安装（“应用程序”）

---

检查

setup（）

中是否存在组件的一种简单方法是使用or，它按名称查找组件。请注意

resolveDynamicComponent（）

的文档中指出，它会对不存在的组件发出警告，但实际上是

resolveComponent（）

发出警告（从

v3.0.9

开始）

如果找不到组件，这两个函数都会返回给定的组件名称，因此您可以通过验证返回类型不是字符串来确定该组件是否存在：

从“vue”导入{computed，resolveDynamicComponent}
导出默认值{
设置（）{
const isComponent=name=>resolveDynamicComponent（名称）的类型！=='string'
const store=useStore（）；
const getFormRenderer=计算（（）=>
iComponent（store.state.level.actionSelected.plugin）
？store.state.level.actionSelected.plugin
：“DefaultComponent”
);
返回{
getFormRenderer
}
},
组成部分：{
//...
},
}

---

检查

setup（）

中是否存在组件的一种简单方法是使用or，它按名称查找组件