Full-Stack Vue.js 2 and Laravel 5

Custom events
Our carousel controls are displaying nicely, but they still don't do anything!
When they're clicked, we need them to tell ImageCarousel to either increment or
decrement its index value, which will result in the image being changed.
Dynamic props won't work for this task, as props can only send data down from
a parent to a child. What do we do when the child needs to send data up to the
parent?
Custom events can be emitted from a child component and listened to by its
parent. To implement this, we use the $emit instance method in the child, which
takes the event name as the first argument and an arbitrary number of additional
arguments for any data to be sent along with the event, such as this.$emit('myevent',
'My event payload');.
The parent can listen to this event using the v-on directive in the template where
the component is declared. If you handle the event with a method, any arguments
sent with the event will be passed to this method as parameters.
Consider this example, where a child component, MyComponent, emits an event
called toggle to tell the parent, the root instance, to change the value of a data
property, toggle:
{{ message }}
Vue.component('my-component', { template: 'Click me', methods: { clicked: function() {
this.$emit('toggle'); } } });
new Vue({ el: '#app', data: { toggle: false }, computed: { message: function() {
return this.toggle ? 'On' : 'Off'; } } });