Ver tutorial de pestañas - Cambio de componentes dinámicos

Ver tutorial de pestañas - Cambio de componentes dinámicos

En este tutorial, aprenderemos a cambiar dinámicamente entre componentes creando una interfaz con pestañas con Vue.js.

Índice
  1. Comenzar
  2. Creación de componentes
  3. Creación de pestañas
  4. Agregar estilos

Comenzar

Creemos un nuevo proyecto vue usando vue-cli.

Abra su terminal y ejecute el siguiente comando para crear un proyecto vue.

Este comando anterior descargará los archivos relacionados con la vista en el vue-tabs carpetas.

Ahora cambie su directorio de trabajo actual ejecutando el siguiente comando.

Ahora abre tu vue-tabs carpeta del proyecto en su editor de código favorito.

Creación de componentes

Vamos a crear dos nuevos componentes llamados Home Y Contact dentro de nuestro components carpetas.

Componente de inicio

Inicio.ver

<template>
  <div>
   <h1>This is Home component</h1>
  </div>
</template>

<script>
export default {};
</script>

componente de contacto

Contacto.ver

<template>
  <div>
   <h1>This is Contact component</h1>
  </div>
</template>

<script>
export default {};
</script>

Creación de pestañas

Vamos a crear una interfaz con pestañas importando nuestros dos componentes dentro App.vue archivar.

Vue.js nos proporciona una <component> elemento que se utiliza para renderizar dinámicamente componentes agregando :is atributo especial.

Vista de la aplicación

<template>
  <div>
    <button v-for="tab in tabs" :key="tab" @click="selected = tab;">
      {{ tab }}
    </button>

    <component :is="selected"></component>  </div>
</template>

<script>
import Home from "./components/Home";
import Contact from "./components/Contact";

export default {
  data: function() {
    return {
      tabs: ["Home", "Contact"],      selected: "Home"    };
  },
  components: {
    Home,
    Contact
  }
};
</script>

En nuestro modelo, agregamos un <component> elemento con :is="selected"
atributo, predeterminado selected la propiedad apunta a Home Componiendo.

Estamos actualizando nuestro selected propiedad basada en el nombre de un componente.

Probemos nuestra aplicación.



ver-pestañas-ejemplo

Agregar estilos

Agreguemos los estilos activos a nuestro tab botón para que podamos saber actualmente qué pestaña se muestra.

Actualiza tu App.vue archivo agregando los estilos a continuación.

Vista de la aplicación

<template>
  <div>
    <button
      v-for="tab in tabs"      :key="tab"
      @click="selected = tab;"
      :class="['tab-btn', { active: selected === tab }]"    >
      {{ tab }}
    </button>

    <component :is="selected" class="tab"></component>
  </div>
</template>

<script>
import Home from "./components/Home";
import Contact from "./components/Contact";

export default {
  data: function() {
    return {
      tabs: ["Home", "Contact"],
      selected: "Home"
    };
  },
  components: {
    Home,
    Contact
  }
};
</script>

<style>
.tab-btn {
  padding: 6px 10px;
  background: #ffffff;
  cursor: pointer;
  margin-bottom: 1rem;
  border: 2px solid #cccccc;
  outline: none;
}

.active {
  border-bottom: 3px solid green;
  background: #fcfcf;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

salir:

Pestañas de estilos de vista añadidas

Si quieres conocer otros artículos parecidos a Ver tutorial de pestañas - Cambio de componentes dinámicos 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