The Vue component Tag
JSX and render
functions are great for situations where the component being rendered needs to be very dynamic.
The way to achieve this within regular Vue.js templates is by using the component
tag.
The component
tag uses the is
prop to dynamically select which component will be rendered.
To render a dynamic component, we use a component
tag with a bound is
property (here, we are using the shorthand :is
, which is equivalent to v-bind:is
):
<component :is="componentName" />
We will now learn how to render dynamic components using a name or component reference.
Rendering Dynamic Components by Name or Component Reference
Let's say we have a grid that contains items whose display can be toggled between a card display (a design element with an image and text) or an image-only view.
First, we need to import the relevant components and register them as components. We will also set some fixture data to loop through...