Global component doesn't work with emit value passing via child component ?

[chrisnaadhi]

Hello all, i'm new to vue and i would like to ask something about emitting a value (that bring a component value) from child component then pass it to "is" attribute in
Here is my code :

I'm just wondering does global component doesn't work with emit that way ? the above code give ----> on html after clicking the navigation and the component is break.
My workaround is using local registration component (import .. from ..) in TheNavigation.vue, then delete the global component and it work flawlessly.
Is there any other workaround for this using global component in main.js ? without register it locally ? just wondering if there is any other possible solution to using global component.
If there is any topic that discuss about this, please kindly drop the link so i can read further.
Thank you in advance !

[leopiccionia]

When registering a global component, the component doesn't become a global variable. To use the component as a variable, you have to import it. But there's another way:

Currently, <component :is="comp"/> is compiled to something like resolveDynamicComponent(comp).

resolveDynamicComponent wraps the resolveComponent function, that can accept the component name as a string.

Have you tried doing setActivePage('TeamsList') and setActivePage('UsersList')?

[chrisnaadhi]

Whoa thanks! it's works now as expected with global component by convert the component name to string.
This is interesting, yesterday i've been trying to use something like that too setActivePage('TeamsList') & setActivePage('UsersList') but the rendered result is <teamslist></teamslist> tag then i'm tried to change the component name to 'teams-list' and 'users-list' with my assumption it won't passing uppercase character, but the rendered result still break, maybe because i'm messed up somewhere in the import statement. But hey, it works now. 😆

Thank you for the explanation, really help much appreciated!