Understanding components

JSX and render functions are great for situations where the component being rendered needs to be very dynamic. We can also achieve this capability using the Vue component.

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 for the grid:

<template>
  <div id="app">
    <div class="grid&quot...