Ejemplo de componentes dinámicos de Vuejs

Ejemplo de componentes dinámicos de Vuejs |  Reaccionar

En este tutorial, aprenderemos cómo cambiar dinámicamente de un componente a otro en vuejs.

Este tutorial asume que ya ha creado una nueva aplicación Vue usando vue-cli.

Vamos a crear dos nuevos componentes en nuestra aplicación.

usuario1.vista

<template>
<div>
   <h1>Hello user1</h1>
</div>
</template>

<script>
</script>

usuario2.vista

<template>
<div>
   <h1>Hello user2</h1>
</div>
</template>

<script>
</script>

Ahora importe estos dos componentes dentro App.vue archivo y guárdelo.

Vista de la aplicación

<template>
<div id="app">
   <h1>App component</h1>
</div>
<template>

<script>
  import User1 from './user1.vue';  import User2 from './user2.vue';export default {
    components:{
        'app-user1':User1,        'app-user2':User2    }
}

</script>
Índice
  1. elemento componente
  2. elemento de soporte vital

elemento componente

Vuejs nos proporciona una <component> elemento con :is atributo especial mediante el cual podemos cambiar dinámicamente entre componentes.

Ahora actualiza tu App.vue archivo con el siguiente código.

Vista de la aplicación

<template>
<div id="app">
   <h1>App component</h1>
   <component :is="selectedComponent"></component>   <button @click="selectedComponent='app-user1'">Switch to user1</button>   <button @click="selectedComponent='app-user2'">Switch to user2</button>
</div>
<template>

<script>
  import User1 from './user1.vue';
  import User2 from './user2.vue';
export default {
    data: function(){
        return {
             
            selectedComponent: "app-user1"        }
    }
    components:{
        'app-user1':User1,
        'app-user2':User2
    }
}

</script>

En el código anterior, agregamos un <component> elemento con :is vinculación de atributos a selectedComponent propiedad.

selectedComponent propiedad tiene el valor de un registered Nombre del componente (app-user1).

Cuando hacemos clic en un Switch to user1 botón al que cambiamos dinámicamente User1 componente del mismo cuando hacemos clic en un Switch to user2 botón al que cambiamos User2 Componiendo.

elemento de soporte vital

Al cambiar entre componentes dinámicos, cada vez que vue crea una nueva instancia de Vue, por lo que si algún estado dentro de nuestro componente se restablece y perdemos datos antiguos.

Para permanecer en el estado anterior, tenemos que envolver nuestro component elemento con el keep-alive.

<keep-alive>
    <component :is="selectedComponent"></component>
</keep-alive>

Ahora nuestro estado está almacenado en caché por la vista.

Si quieres conocer otros artículos parecidos a Ejemplo de componentes dinámicos de Vuejs puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas