Vue3 is atributo

Vue3 内置属性Vue3 atributos integrados

isEl atributo es la propiedad central en Vue para implementar componentes dinámicos; se utiliza para especificar dinámicamente qué componente debe renderizar el elemento actual.

Descripción básica

isEl atributo se utiliza principalmente en escenarios de componentes dinámicos, permitiendo cambiar dinámicamente entre diferentes componentes en tiempo de ejecución según los datos. Esta es la forma principal de implementar la funcionalidad de componentes dinámicos en Vue.

  • Tipo: String | Component
  • Función: Cambio dinámico de componentes, logrando la reutilización y el renderizado dinámico de componentes.

Uso básico

1. Cambio dinámico de componentes

Usando<component>el elemento junto conisel atributo se pueden implementar componentes dinámicos:

Ejemplo

<template>
  <div>
    <!-- currentComponent puede ser una cadena como 'ComponentA', 'ComponentB', etc. -->
    <component :is="currentComponent"></component>

    <button @click="toggleComponent">Cambiar componente</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. Uso de objetos de componente

El valor de is también puede ser directamente un objeto de componente:

Ejemplo

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

Casos de uso

1. Cambio de pestañas

Logra un efecto similar al cambio de pestañas:

Ejemplo

<template>
  <div>
    <!-- Navegación de pestañas -->
    <button
     v-for="tab in tabs"
     :key="tab.name"
     :class="{ active: currentTab === tab.name }"
     @click="currentTab = tab.name"
   >
      {{ tab.label }}
    </button>

    <!-- Componente dinámico -->
    <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: 'Inicio', component: HomeTab },
{ name: 'Profile', label: 'Perfil', component: ProfileTab },
{ name: 'Settings', label: 'Configuración', component: SettingsTab }
      ]
    }
  },
  computed: {
    currentTabComponent() {
      const tab = this.tabs.find(t => t.name === this.currentTab)
      return tab ? tab.component : null
    }
  }
}
</script>

2. Renderizado condicional de diferentes componentes

Selecciona dinámicamente el componente a renderizar según las condiciones:

Ejemplo

<template>
  <div>
    <select v-model="selectedType">
      <option value="warning">Advertencia</option>
      <option value="error">Error</option>
      <option value="success">Éxito</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: 'Este es un mensaje de aviso'
    }
  },
  computed: {
    alertComponent() {
      const componentMap = {
        warning: WarningAlert,
        error: ErrorAlert,
        success: SuccessAlert
      }
      return componentMap[this.selectedType]
    }
  }
}
</script>

Usar is en elementos nativos

En Vue 3.1+, cuandoisel atributo se utiliza en elementos HTML nativos, se interpreta como la funcionalidad de elementos personalizados de la plataforma web nativa.

Pero a veces es necesario reemplazar elementos nativos por componentes Vue en plantillas DOM. Por ejemplo, en<table>se usan componentes personalizados como fila:

Ejemplo

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

Usando elvue:prefijo, Vue puede renderizar el elemento como un componente Vue en lugar de un elemento HTML nativo.

Consideraciones

El valor del atributo is: puede ser una cadena con el nombre del componente o un objeto de componente. Cuando se usa una cadena, el nombre del componente debe coincidir con el nombre registrado.

Usar propiedades computadas: se pueden devolver diferentes componentes según una lógica condicional compleja, logrando un cambio de componentes dinámicos más flexible.

keep-alive: almacenamiento en caché de componentes dinámicos

Usando<keep-alive>para envolver componentes dinámicos, se pueden almacenar en caché las instancias de los componentes, evitando recrearlos en cada cambio:

Ejemplo

<template>
  <div>
    <button @click="currentTab = 'home'">Inicio</button>
    <button @click="currentTab = 'profile'">Perfil</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>Se almacenan en caché las instancias de los componentes por los que se ha pasado; cuando el componente se muestra de nuevo, se restaura directamente desde la caché en lugar de recrearlo.

Vue3 内置属性Vue3 atributos integrados

Otras extensiones