Eventos EMIT en Vue: Comunicación entre Componentes

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0022:15

Eventos EMIT en Vue: Comunicación entre Componentes

Curso de Vue.js

Clase 25 de 34

Clase 25 / 34

Recursos

¿Qué son los EMITS en Vue?

¿Alguna vez te has preguntado cómo la comunicación entre componentes hijos y padres en Vue puede ser simplificada y eficaz? Aquí es donde entran en juego los EMITS. A través de los EMITS, Vue proporciona una manera de enviar eventos personalizados desde un componente hijo a uno padre. Es decir, puedes definir eventos propios de un componente que se activan bajo ciertas condiciones específicas. Aunque podrían implementarse como props, usar EMITS ofrece ventajas significativas al clarificar y estructurar mejor el código.

¿Cómo implementar un EMIT en Vue?

Imagina que tienes una barra de búsqueda que debe comunicar cambios al componente padre. Para lograr que funcione sin problemas, seguirás estos pasos:

Define Props: Primero, necesitas las propiedades. Por ejemplo, en un componente game layout, solicita los juegos a través de defineProps.
```
const props = defineProps({
  games: {
    type: Array,
    required: true,
  },
});
```
Referencia de Datos Originales: Siempre es útil tener una copia original de los datos a manipular, especialmente para gestionar las mutaciones de una lista como juegos.
```
const gamesView = ref(state.games);
```
EMIT personalizado: Declara un EMIT, como setGameView, que permitirá modificar desde el componente padre.
```
const emit = defineEmits(['setGameView']);
```
Usa el EMIT en la acción correspondiente: Cuando la acción se dispara (por ejemplo, una búsqueda), usa el EMIT para enviar datos al componente padre.
```
emit('setGameView', filteredGames);
```

¿Cómo mejorar la funcionalidad de la barra de búsqueda?

El objetivo es lograr que tu barra de búsqueda interactúe perfectamente con la lista de games, ajustando el comportamiento según la entrada del usuario.

Función de Búsqueda: Implementa una función que filtre los games basado en una entrada.

const search = (input) => {
  const termSearch = input.toLowerCase();
  return props.games.filter(game => 
    game.title.toLowerCase().includes(termSearch)
  );
};

Manejo de Resultados: Asegúrate que si la búsqueda es vacía, la lista se restablezca a su estado inicial.
```
if (termSearch === '') {
  emit('setGameView', props.games);
  return;
}
```

Solucionando errores comunes

Implementando características como filtros y eventos, pueden surgir varios inconvenientes. Aquí algunos consejos para gestionar estos desafíos:

Chequea las Reglas de Mutación: Las props no deben ser mutadas directamente ya que Vue prohibe esto en aras de mantener la unidireccionalidad de los datos.
Casting de Variables: Asegúrate de que las variables sean interpretadas correctamente, ya que un tipo incorrecto puede resultar en errores de tipo no manejados.

Retos y mejoras sugeridas

La implementación de un EMIT básico es solo el comienzo. Aquí algunas ideas para refinar y extender tu proyecto:

Implementar Observadores (Watchers): Para automatizar el restablecimiento de la vista completa de games, podrías usar un watcher que escuche cambios en el input de búsqueda.
Añadir un Botón de Reseteo: Considera incluir un botón que solo aparezca cuando se haya realizado una búsqueda, permitiendo al usuario restablecer la lista a su estado original con un clic.
Simplificación Algorítmica: Mejorar el algoritmo de búsqueda para buscar de manera más eficiente y sin problemas de lógica.

Experimenta y personaliza estos elementos; la práctica te acercará a soluciones más óptimas y robustas. Tu aplicación será cada vez más dinámica, lo que hará que tanto tú como los usuarios tengan una experiencia enriquecedora. Si te encuentras con dudas durante este proceso, recuerda que el conocimiento se profundiza cuando se enfrenta con retos y errores. ¡Sigue con entusiasmo tu camino en Vue!

Bryan Castano

Hace un año

Hola Chicos, esta son algunas de mis mejroas en las sugerencias del profesor para la mejor UX en la SearchBar para cmapos de busqueda.

./src/App.vue<script setup>

import LayoutHero from './components/Layout/LayoutHero.vue';

import GameCard from './components/Games/GameCard.vue';

import GameLayout from './components/Games/GameLayout.vue';

import { onMounted ,reactive, ref, computed, watch } from 'vue';

const API_URL = 'https://gamestreamapi.herokuapp.com/api/games';

// 1. Estado para datos y carga

const rxState = reactive({

error: null,

isLoading: false,

data: [] // Datos originales de la API

});

// 2. Estado para el término de búsqueda (nueva)

const searchTerm = ref('');

const fetchData = async () => {

try {

rxState.isLoading = true;

const response = await fetch(API_URL);

const GameData = await response.json();

rxState.data = GameData;

} catch (error) {

console.error('Error fetching data:', error);

rxState.error = error;

} finally {

rxState.isLoading = false;

}

};

onMounted(() => {

fetchData();

});

// 3. Propiedad Computada: Lógica de filtrado centralizada

const filteredGames = computed(() => {

const term = String(searchTerm.value).toLocaleLowerCase().trim();

const allGames = rxState.data;

// Si no hay término de búsqueda, devuelve todos los juegos

if (!term) {

return allGames;

}

// Filtra los juegos

const results = allGames.filter((game) => {

const gameTitle = String(game.title || '' ).toLocaleLowerCase();

return gameTitle.includes(term);

});

return results;

});

// 4. Manejador del evento de búsqueda

const handleSearch = (newSearchTerm) => {

searchTerm.value = newSearchTerm;

};

watch(searchTerm, (newValue) => {

if (String(newValue).trim() === '') {

// Cuando el campo se vacía, el computed 'filteredGames' automáticamente

// vuelve a la lista completa. Aquí no necesitamos hacer nada más.

console.log('Término de búsqueda vacío. La vista se ha reseteado automáticamente.');

}

});

const isSearching = computed(() => {

return String(searchTerm.value).trim() !== '';

});

const handleReset = () => {

searchTerm.value = '';

}

</script>

<script setup>
import LayoutHero from './components/Layout/LayoutHero.vue';
import GameCard  from './components/Games/GameCard.vue';
import GameLayout from './components/Games/GameLayout.vue';
import { onMounted ,reactive, ref, computed, watch }  from 'vue';

const API_URL = 'https://gamestreamapi.herokuapp.com/api/games';

// 1. Estado para datos y carga
const rxState = reactive({
  error: null, 
  isLoading: false,
  data: [] // Datos originales de la API
});

// 2. Estado para el término de búsqueda (nueva)
const searchTerm = ref('');

const fetchData = async () => {
  try {
    rxState.isLoading = true;
    const response = await fetch(API_URL);
    const GameData = await response.json();
    rxState.data = GameData;
  } catch (error) {
    console.error('Error fetching data:', error);
    rxState.error = error;
  } finally {
    rxState.isLoading = false;
  }
};

onMounted(() => {
  fetchData();
});
// 3. Propiedad Computada: Lógica de filtrado centralizada
const filteredGames = computed(() => {
  const term = String(searchTerm.value).toLocaleLowerCase().trim();
  const allGames = rxState.data;

  // Si no hay término de búsqueda, devuelve todos los juegos
  if (!term) {
    return allGames;
  }

  // Filtra los juegos
  const results = allGames.filter((game) => {
    const gameTitle = String(game.title ||  '' ).toLocaleLowerCase();
    return gameTitle.includes(term);
  });
  return results;
});

// 4. Manejador del evento de búsqueda
const handleSearch = (newSearchTerm) => {
  searchTerm.value = newSearchTerm;
};

watch(searchTerm, (newValue) => {
  if (String(newValue).trim() === '') {
    // Cuando el campo se vacía, el computed 'filteredGames' automáticamente
    // vuelve a la lista completa. ...
    console.log('Término de búsqueda vacío. La vista se ha reseteado automáticamente.');
  }
});

const isSearching = computed(() => {
    return String(searchTerm.value).trim() !== '';
});

const handleReset = () => {
  searchTerm.value = '';
}
</script>

Este es <templates>

<template>
  <LayoutHero />
  <GameLayout
    :games="filteredGames"
    @search="handleSearch"
    @reset="handleReset"
    :isSearching="isSearching"
  >
    <template #title>
      <h3 style="text-align: center; margin-top: 1rem;">Welcome to GameStream</h3>
      <p style="text-align: center; margin-bottom: 1rem;">Your ultimate destination for streaming and discovering the latest and greatest games.</p>
    </template>

    <div v-if="rxState.isLoading" class="status-message">
        <p>Loading Games fro mAPI... Please Wait. </p>
    </div>

    <div v-else-if="rxState.error" class="status-message error">
        <p>¡Error al cargar los datos!</p>
        <p>Detalle: {{ rxState.error.message || 'Error desconocido' }}</p>
    </div>

    <template v-else>
        <GameCard v-for="game in filteredGames" :key="game.title" :game="game" />
        <p v-if="!isSearching && filteredGames.length === 0" style="text-align: center;">
            There is no Games...
        </p>
        <p v-else-if="isSearching && filteredGames.length === 0" style="text-align: center;">
            No se encontraron juegos para {{ searchTerm }}.
        </p>
    </template>
    </GameLayout>
</template>

<style scoped>
main {
  padding: 2rem;
}
</style>

./src/components/Games/GameLayout/templates

<template>
  <section>
    <slot name="title" />
    <div class="game-layout">
      <SharedSearch @search="handleSearch" class="my-class" id="search-form" />
      <button v-if="isSearching" style="background: none; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;" class="reset-button" @click="handleReset">
        <span v-if="isSearching" @click="handleReset" style="cursor: pointer; color: blue; text-decoration: underline;">
          Clear Search (X)
        </span>
      </button>
      <slot />

    </div>
  </section>
</template>

./src/components/Shared/SharedSearch.vue/tempaltes

<template>

<form @submit.prevent="onSearch">

<div class="search" :class="searchClasses" @click="onContainerClick">

<input

ref="input"

class="search__input"

v-model="model"

@focus="onFocus"

@blur="onBlur"

type="text"

placeholder="search games..."

@keydown.stop.enter="onSearch" />

<button class="search__submit" type="submit">

<IconSearch />

</button>

</div>

</form>

</template>

Yo cambiado algunas codas con los emits i+y una

function onSearch() {

// Aquí usamos model.value directamente, ya que V-model lo mantiene actualizado.

// No necesitamos el evento 'event' si usamos @submit.prevent

emit('search', model.value);

}

// focus input when clicking the container so onFocus runs

function onContainerClick() {

input.value?.focus();

}

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Eventos EMIT en Vue: Comunicación entre Componentes