Dynamic components with is attribute in Vue - Step-by-Step Execution

Concept Flow - Dynamic components with is attribute

Start

↓

Define component names

↓

Set dynamic component name in data

↓

Vue renders <component :is="currentComponent">

↓

Component matching currentComponent is mounted

↓

User triggers change

↓

Update currentComponent value

↓

Vue re-renders new component

↓

Repeat or End

Vue uses the 'is' attribute to switch which component to render dynamically based on a variable, updating the view when the variable changes.

Execution Sample

Vue

const app = Vue.createApp({
  data() {
    return { currentComponent: 'comp-a' };
  }
});
app.component('comp-a', { template: '<p>Component A</p>' });
app.component('comp-b', { template: '<p>Component B</p>' });

This code sets up two components and a variable to choose which one to show dynamically.

Execution Table

Step	Action	currentComponent	Rendered Component	Output
1	Initialize app	comp-a	comp-a	<p>Component A</p>
2	Render dynamic component	comp-a	comp-a	<p>Component A</p>
3	User changes currentComponent to 'comp-b'	comp-b	comp-b	<p>Component B</p>
4	Re-render dynamic component	comp-b	comp-b	<p>Component B</p>
5	User changes currentComponent to 'comp-a'	comp-a	comp-a	<p>Component A</p>
6	Re-render dynamic component	comp-a	comp-a	<p>Component A</p>
7	No more changes	comp-a	comp-a	<p>Component A</p>

💡 Execution stops when no further changes to currentComponent occur.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
currentComponent	comp-a	comp-b	comp-a	comp-a

Key Moments - 3 Insights

Why does changing currentComponent update the displayed component?

Because Vue watches the currentComponent variable used in the 'is' attribute and re-renders the matching component when it changes, as shown in steps 3 and 4.

What happens if currentComponent is set to a component name that is not registered?

Vue will render nothing or an empty placeholder because it cannot find a matching component, so no output appears. This is not shown in the table but is important to know.

Does Vue keep the state of the old component when switching dynamically?

By default, Vue destroys the old component and creates a new one, so state is reset. To preserve state, you would use <keep-alive>, which is not covered here.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of currentComponent at Step 4?

A comp-a

B comp-c

C comp-b

D undefined

💡 Hint

Check the 'currentComponent' column at Step 4 in the execution_table.

At which step does the component output change from '<p>Component A</p>' to '<p>Component B</p>'?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Output' column in the execution_table and find when it switches to Component B.

If currentComponent was never changed after initialization, what would the output be at Step 7?

A <p>Component A</p>

B No output

C <p>Component B</p>

D Error

💡 Hint

Refer to the variable_tracker and execution_table for the initial and final value of currentComponent.

Concept Snapshot

Vue dynamic components use the <component :is="componentName"> syntax.
The 'is' attribute value is a variable holding the component name.
Changing this variable switches which component Vue renders.
Vue destroys the old component and mounts the new one.
Useful for swapping views without manual DOM changes.

Full Transcript

This visual execution shows how Vue dynamically renders components using the 'is' attribute. Initially, the variable currentComponent is set to 'comp-a', so Vue renders Component A. When currentComponent changes to 'comp-b', Vue destroys Component A and renders Component B instead. Changing currentComponent back to 'comp-a' swaps the view again. This dynamic switching happens automatically because Vue tracks the variable used in the 'is' attribute and updates the DOM accordingly. Beginners often wonder why changing the variable updates the view; it's because Vue reacts to data changes and re-renders the matching component. If the variable points to an unregistered component, Vue renders nothing. Also, by default, component state is lost when switching unless special wrappers like keep-alive are used. This trace helps learners see each step of the variable change and component rendering clearly.