Los componentes en Vue.js necesitan compartir datos entre sí a veces para dar el resultado deseado. Los componentes de una página web están en un orden jerárquico como un árbol. La forma más básica de interactuar y pasar datos entre componentes es usando $emit y props.
$emit y accesorios: en Vue.js, usamos $ emit para generar eventos personalizados para nuestro componente. Es decir, al igual que un clic del mouse o el desplazamiento genera eventos onclick y onwheel, podemos generar eventos a partir de nuestros métodos de componentes y nombrarlos de acuerdo con nuestra convención. No solo esto, también podemos pasar datos como argumentos a este evento.
this.$emit('setevent',someVariable);
Los accesorios se utilizan para pasar datos a los componentes como atributos personalizados. Los accesorios se agregan a los componentes de la siguiente manera:
Vue.component('exampleComponent',{
props: ['sometext'],
template : `<p>This is the prop data - {{sometext}}</p>`
});
¿Como funciona?
Entonces, cómo funciona esto es que el componente principal escucha el evento del primer componente secundario y luego ejecuta una banda de método. Este método obtiene los datos del evento como argumento y luego pasa estos datos a los accesorios del segundo componente secundario.
Ejemplo: El siguiente ejemplo ilustra cómo funciona este mecanismo. Es una página web muy básica que muestra cuántas veces se ha hecho clic en un botón. Tiene 3 componentes: un componente principal y 2 componentes secundarios dentro de él.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- Including Vue using CDN-->
<script src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<!-- Javascript code -->
<script src="script.js"></script>
<style>
.component1 {
display: block;
background-color: green;
height: 15em;
text-align: center;
color: white;
padding-top: 5em;
}
.component2 {
display: block;
background-color: grey;
height: 15em;
text-align: center;
padding-top: 5em;
}
</style>
</head>
<body>
<div id="root">
<parentcomponent></parentcomponent>
</div>
</body>
</html>
Javascript
/* First component has a heading element in
the template which shows how many times
the button in 2nd component has been
clicked. It uses props. */
Vue.component('component1', {
props: ['labeltext'],
// This props is then used in template
// to have dynamic values.
template: `<div class="component1">
<h1>You have clicked {{labeltext}} times</h1>
</div>`
});
/* Second component has a button which when
clicked upon executes the count method. A
custom event namely ‘setevent’ is triggered
by this method. */
Vue.component('component2', {
data() {
return {
nclick: 0
}
},
template: `<div class="component2">
<button @click = "count">Click</button>
</div>`,
methods: {
count() {
this.nclick += 1;
// Emitting a custom-event
this.$emit('setevent', this.nclick);
}
}
});
// This is just a div element component which
// contains the two child components in it.
Vue.component('parentcomponent', {
data() {
return {
text: 0
}
},
// Set method is binded to the 'setevent'
// event and labeltext is the prop.
template: `<div>
<component1 :labeltext = "text"></component1>
<component2 @setevent = "set"></component2>
</div>`,
methods: {
set(n) {
// Updates the variable text which
// is the value of prop attribute
this.text = n;
}
}
});
new Vue({
el: '#root',
data: { }
})
Producción:
Aplicaciones y alcance: los componentes en una aplicación web Vue.js están en un orden jerárquico con muchos niveles como un árbol con componentes dentro de componentes. Usando el método anterior, es posible enstringr múltiples eventos y trepar por este árbol y luego pasar los datos a los niveles inferiores usando prop.
Por lo tanto, este método es muy adecuado cuando requerimos la interacción de componentes dentro de 2 o 3 niveles, pero tan pronto como nuestra aplicación web requiere interacción entre componentes que se encuentran en niveles muy diferentes, este proceso se vuelve cada vez más complejo, como puede imaginar. Ahí es cuando entran en juego las bibliotecas de gestión estatal como Vuex. Pero para las interacciones básicas usamos $emit y props, para no arrojar todo a nuestra tienda Vuex.
Publicación traducida automáticamente
Artículo escrito por abhijeetcatches33 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA