I am using as a library Vue.js I have the case of using a component that calls other components the question is how can I issue a function when doing an action within my child component.
example:
that by making click in the child component change the data of the parent component.
I'm already using vuex but my question is if you can directly change the data of the parent component with the action of the child component, I hope to make you understand thank you very much.
We must add the function $emit to an event of the child component that in turn performs an event of the father, in this case when doing click we issue the function funcionLlamadaDesdeHijo() that changes the text of the data mensaje .
Greetings, I hope I help you.
var componenteHijo = {
template:'
<div>
<button type="button" name="button">No tiene la funcion $emit de vue</button>
<button type="button" name="button" @click="$emit('click','Cambio la data por la emision del componente hijo')">Emitir cambio al data padre</button>
</div>
'
}
var app = new Vue({
el: '#app',
data: {
mensaje: 'Hola mundo'
},
components:{
componenteHijo
},
methods:{
funcionLlamadaDesdeHijo(textoNuevo){
this.mensaje = textoNuevo
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>
<div id="app">
<h1>
{{ mensaje }}
</h1>
<br>
<componente-hijo @click="funcionLlamadaDesdeHijo">
</componente-hijo>
</div>