1

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

        }
    }
})

「領収書」コンポーネントのインスタンスが複数あるため、コンポーネントの計算された「合計」関数から複数の値が計算されます。コンポーネントのインスタンスの「合計」関数の値をディスパッチし、親インスタンスで「総計」を取得するにはどうすればよいですか

4

1 に答える 1

2

次のように、コンポーネントにイベントを「ディスパッチ」するメソッドを作成する必要があります。

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

eventName は、アプリが予期するイベントの名前であり、ディスパッチ時に選択されます。データは、イベントが選択されたときに使用できるデータです。

アプリ インスタンスでは、'events' という prop を定義するだけで、イベントを選択して何かを行うことができます。このような：

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

このように、'yourMethod' (コンポーネントのメソッド) が呼び出されるたびに、'eventName' という名前のイベントが送出され、アプリがそれを選択して処理します。

それが役立つことを願っています!

于 2016-08-31T16:18:08.900 に答える