Attribut is de Vue3

Vue3 内置属性Attributs intégrés de Vue3

isL'attribut is est un attribut essentiel de Vue pour implémenter des composants dynamiques. Il est utilisé pour spécifier dynamiquement le composant que l'élément courant doit rendre.

Explication de base

isL'attribut is est principalement utilisé dans les scénarios de composants dynamiques, permettant de basculer dynamiquement entre différents composants pour le rendu à l'exécution en fonction des données. C'est la principale façon d'implémenter la fonctionnalité de composant dynamique dans Vue.

  • Type: String | Component
  • Objectif: Basculer dynamiquement entre les composants pour permettre la réutilisation des composants et le rendu dynamique.

Utilisation de base

1. Changement dynamique de composants

Utilisation<component>l'élément ainsi queisl'attribut peut implémenter des composants dynamiques :

Exemple

<template>
  <div>
    <!-- currentComponent peut être une chaîne comme 'ComponentA', 'ComponentB', etc. -->
    <component :is="currentComponent"></component>

    <button @click="toggleComponent">Changer de composant</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. Utilisation d'objets composants

La valeur de is peut également être directement un objet composant :

Exemple

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="switchToA">Afficher A</button>
    <button @click="switchToB">Afficher 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>

Cas d'utilisation

1. Changement d'onglets

Permet d'obtenir un effet similaire au changement d'onglets :

Exemple

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

    <!-- Composant dynamique -->
    <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: 'Accueil', component: HomeTab },
{ name: 'Profile', label: 'Profil', component: ProfileTab },
{ name: 'Settings', label: 'Paramètres', component: SettingsTab }
      ]
    }
  },
  computed: {
    currentTabComponent() {
      const tab = this.tabs.find(t => t.name === this.currentTab)
      return tab ? tab.component : null
    }
  }
}
</script>

2. Rendu conditionnel de différents composants

Sélectionner dynamiquement le composant à afficher en fonction des conditions :

Exemple

<template>
  <div>
    <select v-model="selectedType">
      <option value="warning">Avertissement</option>
      <option value="error">Erreur</option>
      <option value="success">Succès</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: 'Ceci est un message de notification'
    }
  },
  computed: {
    alertComponent() {
      const componentMap = {
        warning: WarningAlert,
        error: ErrorAlert,
        success: SuccessAlert
      }
      return componentMap[this.selectedType]
    }
  }
}
</script>

Utilisation de is sur des éléments natifs

Dans Vue 3.1+, lorsqueisl'attribut est utilisé sur des éléments HTML natifs, il est interprété comme la fonctionnalité d'élément personnalisé de la plateforme web native.

Mais parfois, vous devez remplacer des éléments natifs par des composants Vue dans les templates DOM. Par exemple, dans<table>utilisation de composants personnalisés comme lignes :

Exemple

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

Utilisationvue:le préfixe permet à Vue de rendre l'élément comme un composant Vue au lieu d'un élément HTML natif.

Notes

La valeur de l'attribut is: Elle peut être une chaîne du nom du composant, ou un objet composant. Lors de l'utilisation d'une chaîne, le nom du composant doit correspondre au nom du composant enregistré.

Utilisation des propriétés calculées: Vous pouvez renvoyer différents composants en fonction d'une logique conditionnelle complexe, ce qui permet un changement plus flexible des composants dynamiques.

Mise en cache des composants dynamiques avec keep-alive

Utilisation<keep-alive>Le fait d'envelopper des composants dynamiques met en cache les instances de composants, évitant leur recréation à chaque bascule :

Exemple

<template>
  <div>
    <button @click="currentTab = 'home'">Accueil</button>
    <button @click="currentTab = 'profile'">Profil</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>Il met en cache les instances des composants qui ont été basculés. Lorsque le composant est affiché à nouveau, il est restauré directement depuis le cache au lieu d'être recréé.

Vue3 内置属性Attributs intégrés de Vue3

Autres extensions