绑定动态组件

Question

我在2.7版的Vue中使用了复合API，而我正在为一件事而奋斗。我想根据一个反应值动态地呈现一个组件。以下是代码：

const renderTab = ref('admin');
// and later in template
<component :is="renderTab"></component>

问题是我犯了错误：

Unknown custom element: <admin>

我正在打印{{ renderTab }}的值及其正确性。对我来说非常令人困惑的事实是，我可以毫无问题地调用这个组件，如下所示：

<admin></admin>或者是这样的：

<component :is="'admin'"></component>，甚至像这样：

<component is="admin"></component>

我错过了什么或者做错了什么？

Answer 1

在将组件用作动态组件之前，需要对其进行解析。对于全球注册的组件，可以是：

const Admin = resolveComponent('Admin')
const renderTab = ref(Admin);

对于本地组件，直接导入和使用Admin更为简单。