Vue3 is-Attribut

Vue3 内置属性Vue3 integrierte Attribute

isDas is-Attribut ist ein zentrales Attribut in Vue zur Implementierung dynamischer Komponenten. Es wird verwendet, um dynamisch anzugeben, als welche Komponente das aktuelle Element gerendert werden soll.

Grundlegende Erklärung

isDas is-Attribut wird hauptsächlich in Szenarien dynamischer Komponenten verwendet und ermöglicht es, zur Laufzeit anhand von Daten dynamisch zwischen verschiedenen Komponenten zum Rendern zu wechseln. Dies ist die primäre Methode, um dynamische Komponentenfunktionalität in Vue umzusetzen.

  • Typ: String | Component
  • Zweck: Komponenten dynamisch wechseln, um Komponentenwiederverwendung und dynamisches Rendering zu erreichen.

Grundlegende Verwendung

1. Dynamisches Wechseln von Komponenten

Verwendung<component>das Element zusammen mitisdem Attribut kann dynamische Komponenten implementieren:

Beispiel

<template>
  <div>
    <!-- currentComponent kann eine Zeichenfolge wie 'ComponentA', 'ComponentB' usw. sein. -->
    <component :is="currentComponent"></component>

    <button @click="toggleComponent">Komponente wechseln</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. Verwenden von Komponentenobjekten

Der Wert von is kann auch direkt ein Komponentenobjekt sein:

Beispiel

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

Anwendungsfälle

1. Tab-Wechsel

Erzielt einen ähnlichen Effekt wie beim Tab-Wechsel:

Beispiel

<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>

    <!-- Dynamische Komponente -->
    <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. Bedingtes Rendern verschiedener Komponenten

Wählen Sie die zu rendernde Komponente dynamisch anhand von Bedingungen aus:

Beispiel

<template>
  <div>
    <select v-model="selectedType">
      <option value="warning">Warnung</option>
      <option value="error">Fehler</option>
      <option value="success">Erfolg</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: 'Dies ist eine Benachrichtigungsnachricht'
    }
  },
  computed: {
    alertComponent() {
      const componentMap = {
        warning: WarningAlert,
        error: ErrorAlert,
        success: SuccessAlert
      }
      return componentMap[this.selectedType]
    }
  }
}
</script>

Verwendung von is auf nativen Elementen

In Vue 3.1+, wennisdas Attribut auf nativen HTML-Elementen verwendet wird, wird es als Custom-Element-Feature der nativen Webplattform interpretiert.

Manchmal müssen Sie jedoch native Elemente in DOM-Vorlagen durch Vue-Komponenten ersetzen. Zum Beispiel bei<table>der Verwendung benutzerdefinierter Komponenten als Zeilen:

Beispiel

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

Verwendungvue:Das Präfix ermöglicht es Vue, das Element als Vue-Komponente statt als natives HTML-Element zu rendern.

Hinweise

Der Wert des is-Attributs: Er kann ein String mit dem Komponentennamen oder ein Komponentenobjekt sein. Bei Verwendung eines Strings sollte der Komponentenname mit dem registrierten Komponentennamen übereinstimmen.

Verwendung berechneter Eigenschaften: Sie können verschiedene Komponenten basierend auf komplexer bedingter Logik zurückgeben, was einen flexibleren dynamischen Komponentenwechsel ermöglicht.

keep-alive-Caching dynamischer Komponenten

Verwendung<keep-alive>Das Umhüllen dynamischer Komponenten speichert Komponenteninstanzen im Cache und vermeidet so die Neuerstellung bei jedem Wechsel:

Beispiel

<template>
  <div>
    <button @click="currentTab = 'home'">Startseite</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>Es speichert die Komponenteninstanzen, die gewechselt wurden, im Cache. Wenn die Komponente erneut angezeigt wird, wird sie direkt aus dem Cache wiederhergestellt, anstatt neu erstellt zu werden.

Vue3 内置属性Vue3 integrierte Attribute

Weitere Erweiterungen