Vue3 is Attribute

Vue3 内置属性Vue3 built-in attributes

isThe is attribute is a core attribute in Vue for implementing dynamic components. It is used to dynamically specify which component the current element should render as.

Basic Explanation

isThe is attribute is mainly used in dynamic component scenarios, allowing different components to be dynamically switched for rendering at runtime based on data. This is the primary way to implement dynamic component functionality in Vue.

  • Type: String | Component
  • Purpose: Dynamically switch components to achieve component reuse and dynamic rendering.

Basic Usage

1. Dynamically switching components

Using<component>the element together withisthe attribute can implement dynamic components:

Example

<template>
  <div>
    <!-- currentComponent can be a string like 'ComponentA', 'ComponentB', etc. -->
    <component :is="currentComponent"></component>

    <button @click="toggleComponent">Switch component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA'
        ? 'ComponentB'
        : 'ComponentA'
    }
  }
}
</script>

2. Using component objects

The value of is can also be a component object directly:

Example

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="switchToA">Show A</button>
    <button @click="switchToB">Show B</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: ComponentA
    }
  },
  methods: {
    switchToA() {
      this.currentComponent = ComponentA
    },
    switchToB() {
      this.currentComponent = ComponentB
    }
  }
}
</script>

Use Cases

1. Tab switching

Achieves an effect similar to tab switching:

Example

<template>
  <div>
    <!-- Tab navigation -->
    <button
     v-for="tab in tabs"
     :key="tab.name"
     :class="{ active: currentTab === tab.name }"
     @click="currentTab = tab.name"
   >
      {{ tab.label }}
    </button>

    <!-- Dynamic component -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script>
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'

export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: [
{ name: 'Home', label: 'Home', component: HomeTab },
{ name: 'Profile', label: 'Profile', component: ProfileTab },
{ name: 'Settings', label: 'Settings', component: SettingsTab }
      ]
    }
  },
  computed: {
    currentTabComponent() {
      const tab = this.tabs.find(t => t.name === this.currentTab)
      return tab ? tab.component : null
    }
  }
}
</script>

2. Conditionally rendering different components

Dynamically select the component to render based on conditions:

Example

<template>
  <div>
    <select v-model="selectedType">
      <option value="warning">Warning</option>
      <option value="error">Error</option>
      <option value="success">Success</option>
    </select>

    <component :is="alertComponent" :message="message" />
  </div>
</template>

<script>
import WarningAlert from './WarningAlert.vue'
import ErrorAlert from './ErrorAlert.vue'
import SuccessAlert from './SuccessAlert.vue'

export default {
  data() {
    return {
      selectedType: 'warning',
message: 'This is a notification message'
    }
  },
  computed: {
    alertComponent() {
      const componentMap = {
        warning: WarningAlert,
        error: ErrorAlert,
        success: SuccessAlert
      }
      return componentMap[this.selectedType]
    }
  }
}
</script>

Using is on native elements

In Vue 3.1+, whenisthe attribute is used on native HTML elements, it is interpreted as the custom element feature of the native web platform.

But sometimes you need to replace native elements with Vue components in DOM templates. For example, in<table>using custom components as rows:

Example

<table>
  <tbody>
    <tr is="vue:my-row-component"></tr>
  </tbody>
</table>

Usingvue:the prefix allows Vue to render the element as a Vue component instead of a native HTML element.

Notes

The value of the is attribute: It can be a string of the component name, or a component object. When using a string, the component name should match the registered component name.

Using computed properties: You can return different components based on complex conditional logic, enabling more flexible dynamic component switching.

keep-alive caching dynamic components

Using<keep-alive>wrapping dynamic components caches component instances, avoiding re-creation on every switch:

Example

<template>
  <div>
    <button @click="currentTab = 'home'">Home</button>
    <button @click="currentTab = 'profile'">Profile</button>

    <keep-alive>
      <component :is="currentTabComponent" />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab + '-tab'
    }
  }
}
</script>

<keep-alive>It caches the component instances that were switched. When the component is shown again, it is restored directly from the cache instead of being recreated.

Vue3 内置属性Vue3 built-in attributes

Other extensions