Vue 'is' Attribute
Example
The is attribute is connected to the computed value 'activeComp' with v-bind (shorthand :) so that either the 'comp-one' component or the 'comp-two' component is displayed.
App.vue:
<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 is attribute can be used for three things:
1. Dynamic components: The is attribute is set on the built-in <component> element to create a dynamic component, where the is attribute defines which component should be the active one.
In more detail, the is attribute is bound to a property with v-bind, and the property holds the name of which component that should be the active one. (See the Example above)
2. Replace a native element with a Vue component: is="vue:my-component" is placed on a native HTML element to replace it with a Vue component. (See Example 1)
If we do not use the vue: prefix, it will be interpreted as a customized built-in element, as explained right below here, and the Vue component will not be inserted.
3. Customized built-in element: Customized built-in elements can be written in JavaScript, and the is attribute can be used on an HTML tag to define it as such a customized built-in element. This is not a Vue feature.
More Examples
Example 1
Using the is attribute to replace an <img> tag with a Vue component.
App.vue:
<template>
<h2>Example Built-in 'is' Attribute</h2>
<p>The IMG tag below is set to be replaced by a component by the use of 'is="vue:child-comp"'.</p>
<img is="vue:child-comp" />
</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>
Related Pages
Vue Tutorial: Dynamic Components
Vue Tutorial: Vue Components
Vue Tutorial: Vue Computed Properties
Vue Tutorial: Vue v-bind Directive
Vue Reference: Vue v-bind Directive
Vue Reference: Vue <component> Element
Vue Reference: Vue $refs Object
