dynamic component
a special vue element that is used in combination with the 'is' attribute.
What it does is to conditionally (and dynamically) render other elements, depending on what is placed inside the is attribute.
<component :is="'card'"></component>
Will render the card component in the DOM. The example shown in your code:
<component :is="user === undefined ? 'div' : 'card'"> dynamically switch between components, like in a tabbed interface:
template
<!-- Component changes when currentTab changes -->
<component :is="currentTab"></component>In the example above, the value passed to :is can contain either:
1) the name string of a registered component, OR
2) the actual imported component object
You can also use the is attribute to create regular HTML elements.
When switching between multiple components with component :is="..." a component will be unmounted when it is switched away from. We can force the inactive components to stay "alive" with the built-in KeepAlive component.
표기법
- SFCs
it's recommended to use PascalCase tag names for child components to differentiate from native HTML elements. Although native HTML tag names are case-insensitive, Vue SFC is a compiled format so we are able to use case-sensitive tag names in it. We are also able to use /> to close a tag.
- If you are authoring your templates directly in a DOM
(e.g. as the content of a native < template > element),
the template will be subject to the browser's native HTML parsing behavior. In such cases, you will need to use kebab-case and explicit closing tags for components:
template
<!-- if this template is written in the DOM -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>