将 Vue 子计算值的总数分发给父级

Question

我不知道如何使用 $dispatch 方法将数据从 Vue 子级发送到 Vue 父级。我有一个包含多个实例的组件，如下所示：

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' ]
})

我的 Vue 实例如下所示：

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() {

        }
    }
})

我有多个 'Receipt' 组件的实例，因此多个值是从组件的计算 'total' 函数中计算出来的。如何分派组件实例 'total' 函数的值并在父实例

中获取我的 'grandtotal'

Answer 1

您必须在组件中创建一个方法来 'dispatches' 一个事件，如下所示：

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

eventName 是您的应用程序期望并在调度时选择的事件的名称，数据只是在选择事件时可用的数据。

在您的应用程序实例中，您只需定义一个名为 'events' 的道具即可选择事件并对其进行处理。像这样：

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

像这样，每次调用 'yourMethod'（您的组件的方法）时，它都会调度名为 'eventName' 的事件，您的应用程序会选择并处理它。

希望对您有所帮助！

将 Vue 子计算值的总数分发给父级

Dispatch total of Vue child computed values to parent

components

mvvm

dispatch

vue.js

vue-component