Thanks for reading my question.
I have read about it:
vuejs update parent data from child component
https://forum.vuejs.org/t/passing-data-back-to-pa
Nightmare
to find "hello world" example out there for $emit
so I added the example below (Minimal lines of code + semantic names of functions).
Vue.component('child', {
template: `
`,
data: function () {
return {
child_msg: "message from child"
}
},
methods: {
childMethod: function() {
this.$emit('child-method', this.child_msg)
}
}
})
var app = new Vue({
el: '#app',
data: {
msg: "I am the blue parent!!!!!!!!!!!!!!!!!!",
},
methods: {
updateParent(value_from_child) {
this.msg = value_from_child;
alert("hello child" + value_from_child)
}
}
})
.child{ background: gray; padding: 15px; }
button{ cursor: pointer; }
#app{ border: 1px red dashed; padding: 15px; background: lightblue; color: blue;
}
{{msg}}
codepen: https://codepen.io/ezra_siton/pen/YzyXNox?editors=1010