親への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() { 

     } 
    } 
}) 

私は「領収書」コンポーネントの複数のインスタンスを持っているので、複数の値は、コンポーネントのから計算されています計算された「合計」関数。どのように私は、コンポーネントのインスタンス「総」関数の値を派遣し、親インスタンスに私の「grandtotal」を取得することができます

Answer 1

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

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

eventNameは、アプリが期待しているイベントの名前で、イベントが選択されたときに使用できるデータにすぎません。

アプリインスタンスでは、「イベント」という名前の小道具を定義するだけで、イベントを選択して何かを行うことができます。このように：このように

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

、毎回「yourMethod」（コンポーネントのメソッド）は、「eventNameの」という名前のイベントを送出します、それを呼ばれ、あなたのアプリがピックアップし、それを処理します。

希望に役立ちます！