Vue newbie here.
Reading the following guide on view components:
https://v2.vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
Presumably upon clicking the checkbox, the value of 'lovingVue' will be passed to the 'checked' prop which will either be a true or false value. But I don't understand what the Vue instance should look like and am wondering if someone can explain this to me?
Cheers, Geof.
JS Fiddle Demo (open your console when you are using it)
Hey geofrey,
First of all, I think that I am newbie too and i will always be :)....
Vue.component() is a way of making component templets but inside the script not inside the HTML templet....still you need to initiate a new Vue() instance.
the "$emit('change', $event.target.checked) inside the child a component, is just a way for the Child component to send back values to the Parent component...
the first argument the $emit() takes is the event listener name (can be any word), check this link , so that's why the event listener here <base-checkbox @change="lovingVue"> is called @change.
The second argument it takes is which value you want to send back to the parent...in this case we want to send the v-bind:checked="checked" value....and this name is what we mention after the $event.target.
then comes the lovingVue part which you can call it as a function in the methods (as if you were treating it as any other event), and it will be carrying the value with it
new Vue({
//'#app' is the name of the parent componenet
el: '#app',
methods:{
// The e (can be any letter or word) here is the value that was emitted by the
// child(base-checkbox) to the parent(app)...and this case the value is Boolean
lovingVue(e){
console.log(e)
}
}
})
