Vue <component> Element
Example
Using the built-in <component> element with the is attribute to create a dynamic component.
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">Switch component</button>
<component :is="activeComp"></component>
</template>
See more examples below.
Definition and Usage
The built-in <component> element is used together with the built-in is attribute to create an HTML element, or a Vue component.
HTML element: To create an HTML element with the <component> element, the is attribute is set equal to the name of the HTML element we want to create, either directly (Example 1), or dynamically by the use of v-bind (Example 2).
Vue component: To render a Vue component with the <component> element, the is attribute is set equal to the name of the Vue component we want to create, either directly (Example 3), or dynamically by the use of v-bind to create a dynamic component (Example 4).
When creating a dynamic component, the built-in <KeepAlive> component can be used around the <component> element to remember the state of components that are not active. (Example 5)
The active component in a dynamic component can also be changed by using a ternary expression with the is attribute. (Example 6)
Note: The v-model directive does not work with native HTML form input tags (such as <input> or <option>) created with the <component> element. (Example 7)
Props
| Prop | Description |
|---|---|
| is | Required. Is set equal to the component that should be active, or is set equal to the HTML element to be created. |
More examples
Example 1
Using the built-in <component> element to create a <div> element.
<template>
<h2>Example Built-in 'component' Element</h2>
<p>The component element is rendered as a div element with is="div":</p>
<component is="div">This is a DIV element</component>
</template>
<style scoped>
div {
border: solid black 1px;
background-color: lightgreen;
}
</style>
Example 2
Using the built-in <component> element to toggle between an ordered list and an unordered list.
<template>
<h2>Example Built-in 'component' Element</h2>
<p>Using the component element to toggle between an ordered list (ol), and an unordered list (ul):</p>
<button v-on:click="toggleValue = !toggleValue">Toggle</button>
<p>Animals from around the world</p>
<component :is="tagType">
<li>Kiwi</li>
<li>Jaguar</li>
<li>Bison</li>
<li>Snow Leopard</li>
</component>
</template>
<script>
export default {
data() {
return {
toggleValue: true
}
},
computed: {
tagType() {
if (this.toggleValue) {
return 'ol'
}
else {
return 'ul'
}
}
}
}
</script>
Example 3
Using the built-in <component> element to render a component by providing the name of the component to the is attribute.
App.vue:
<template>
<h2>Example Built-in 'is' Attribute</h2>
<p>The component element below is set to be a component by the use of 'is="child-comp"'.</p>
<component is="child-comp"></component>
</template>
ChildComp.vue:
<template>
<div>
<h3>ChildComp.vue</h3>
<p>This is the child component</p>
</div>
</template>
<style scoped>
div {
border: solid black 1px;
background-color: lightgreen;
padding: 10px;
max-width: 250px;
margin-top: 20px;
}
</style>
Example 4
Using the built-in <component> element to create a dynamic component, where we can switch between two components.
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">Switch component</button>
<component :is="activeComp"></component>
</template>
<script>
export default {
data () {
return {
toggleValue: true
}
},
computed: {
activeComp() {
if(this.toggleValue) {
return 'comp-one'
}
else {
return 'comp-two'
}
}
}
}
</script>
<style>
#app {
width: 350px;
margin: 10px;
}
#app > div {
border: solid black 2px;
padding: 10px;
margin-top: 10px;
}
</style>
Example 5
The built-in <KeepAlive> component is used around the <component> element to remember the inputs when the components are switched between.
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<p>With the <KeepAlive> tag the components now remember the user inputs.</p>
<button @click="toggleValue = !toggleValue">Switch component</button>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
<script>
export default {
data () {
return {
toggleValue: true
}
},
computed: {
activeComp() {
if(this.toggleValue) {
return 'comp-one'
}
else {
return 'comp-two'
}
}
}
}
</script>
<style>
#app {
width: 350px;
margin: 10px;
}
#app > div {
border: solid black 2px;
padding: 10px;
margin-top: 10px;
}
h2 {
text-decoration: underline;
}
</style>
Example 6
Using the <component> element with the is attribute and a ternary expression to toggle which component should be active.
<template>
<h1>Dynamic Components</h1>
<p>Refresh the page and there is a chance the dynamic component will toggle.</p>
<component :is="Math.random() > 0.5 ? 'comp-one' : 'comp-two'"></component>
</template>
<style>
#app {
width: 350px;
margin: 10px;
}
#app > div {
border: solid black 2px;
padding: 10px;
margin-top: 10px;
}
</style>
Example 7
Demonstrating that the v-model directive does not work with <input> elements created using the <component> element.
<template>
<h1>Dynamic Components</h1>
<p><mark>The v-model directive does not work with input element created with the component element.</mark></p>
<hr>
<p>Does not work, not updating:</p>
<component is="input" type="number" v-model="inpVal1"></component> (try to change value)
<p class="pResult1">inpVal1: {{ inpVal1 }}</p>
<hr>
<p>How it should work, updates:</p>
<input type="number" v-model="inpVal2"> (try to change value)
<p class="pResult2">inpVal2: {{ inpVal2 }}</p>
</template>
<script>
export default {
data() {
return {
inpVal1: 4,
inpVal2: 7,
}
}
}
</script>
<style>
#app {
width: 350px;
margin: 10px;
}
.pResult1 {
background-color: lightpink;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
padding: 5px;
}
.pResult2 {
background-color: lightgreen;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
padding: 5px;
}
</style>
Related Pages
Vue Tutorial: Vue Components
Vue Tutorial: Dynamic Components
Vue Tutorial: Vue Form Inputs
Vue Tutorial: Vue v-model Directive
Vue Reference: Vue is Attribute
Vue Reference: Vue v-bind Directive
Vue Reference: Vue v-model Directive
