Dispatch total of Vue child computed values to parent

Question

I cannot figure out how to use the $dispatch method to send data from a Vue child to a Vue parent. I have a component with multiple instances as follows:

Vue.component('receipt', {
    template: '#receipt-template',
    data: function() {
        return {
            tip: ''
        };
    },
    methods: {
        addSale: function() {
            this.sales.push(
                {amount: 1, desc: '', price: 0.00}
            );
        },
        removeSale: function(index) {
            this.sales.splice(index, 1)
        }
    },
    computed: {
        subtotal: function() {
            var result = 0;
            this.sales.forEach(function (sale) {
                return result += +sale.price;
            });
            var subtotal = Math.round(100 * result) / 100;
            return subtotal.toFixed(2);
        },
        tax: function() {
            var tax = this.subtotal * .08;
            return tax.toFixed(2);
        },
        total: function() {
            var total = Number(this.subtotal) + Number(this.tax) + Number(this.tip);
            return total.toFixed(2);
            this.$dispatch(this.total);
        }
    },
    props: [ 'header', 'date', 'sales' ]
})

And my Vue instance looks like:

var vm = new Vue({
    el: '#content',
    data: {
        sales1: [
            {amount: 1, desc: "Dante's Inferno", price: 13.99},
            {amount: 1, desc: "Espresso", price: 5.25},
            {amount: 1, desc: "The Sun Also Rises", price: 11.99},
            {amount: 1, desc: "Spanish Coffee", price: 1.99}
        ],
        sales2: [
            {amount: 1, desc: "Huckleberry Finn", price: 14.95},
            {amount: 1, desc: "Americano", price: 2.29},
            {amount: 1, desc: "Pride & Prejudice", price: 12.95},
            {amount: 1, desc: "Black Tea Latte", price: 4.25},
            {amount: 1, desc: "Scone", price: 3.25}
        ],
        company: 'Between The Covers & Grinders Cafe'
    },
    computed: {
        grand: function() {

        }
    }
})

I have multiple instances of the 'Receipt' component and therefore multiple values being computed from the component's computed 'total' function. How can I dispatch the values of the component's instances 'total' functions and get my 'grandtotal' in the parent instance

Answer 1

You have to create a method in your component that 'dispatches' an event, like this:

methods: {
        yourMethodName: function(){
            this.$dispatch('eventName', data);
        }
    }

eventName is the name of the event that your app will be expecting and will pick when it's dispatched, the data is just the data that will be available for use when the event is picked.

In your app instance you can just define a prop called 'events' pick the event and do something with it. Like this:

events: {
        'eventName': function(data){
            //do something with it
        }
    }

Like this, everytime 'yourMethod' (your component's method) is called it will dispatch the event named 'eventName' and your app will pick and handle it.

Hope that helps!