Adquiere este curso para tener acceso a todas las lecciones
Comprar curso20. Emisión y manejo de eventos en Vue 3
Los eventos son una forma de comunicar entre componentes hijos y componentes padres. En este capítulo, aprenderás a utilizar los eventos para comunicar cambios desde un componente hijo a su componente padre.
4 comentarios
Inicia sesión para comentar
Comentarios:
-
Edgar Genaro Hernandez Galeano hace 4 días
Como no preste atención a la clase del cdn no me funcionaba, lo publico funcionando por si alguien le pasa lo mismo
-
Edgar Genaro Hernandez Galeano hace 5 días
app.component('detail-course',{
data(){
return{
}
},
props:['course'],
template:
`<h1>{{course.name}}</h1>
<p>{{course.price}}</p>
<button @click="$emit('crecerTexto')">Incrementar Tamaño</button>
});
-
Edgar Genaro Hernandez Galeano hace 5 días
raro creo estar de tener el mismo código:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id="app">
<div :style="{ fontSize: textSize + 'em' }">
<detail-course @crecer-texto="textSize += 0.1" v-for="course in courses" :key="course.id" :course="course"></detail-course>
</div>
</div>
<!--<script src="https://unpkg.com/vue@next"></script>-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="main.js"></script>
<script>
app.mount('#app');
</script>
</body>
</html>
-
Cfig hace 1 año
Hola. Al realizar el ejercicio, veo que en la consola aparece el siguiente mensaje de advertencia:
[Vue warn]: Extraneous non-emits event listeners (increaseText) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.
Apliqué entonces la opción 'emits' (emits: ['crecerTexto']) en el componente detail-course y deja de aparecer el mensaje, sin afectar la funcionalidad.