Binding a Dynamic components-CodePudding

I am using Vue in version 2.7 with Composition API and i`m struggling with one thing. I want to dynamicly render a component, based on a reactive value. Here is the code:

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

Problem is that i`m getting error:

Unknown custom element: <admin>

I am printing the value of {{ renderTab }} and its correct. Very confusing fact for me is that i can without a problem call this component like this:

<admin></admin> or like this:

<component :is="'admin'"></component> or even like this:

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

What am i missing or doing wrong guys?

CodePudding user response：

A component needs to be resolved before it's used as dynamic component. For globally registered component it can be:

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

For local component it's more straightforward to import and use Admin directly.