부모에게 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' ] 
}) 

을 그리고처럼 내 뷰 인스턴스 같습니다 : 나는 '영수증'구성 요소의 여러 인스턴스를 따라서 값이 여러 구성 요소의에서 계산되는

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'라는 이름의 이벤트를 전달합니다 그것을 호출되고 앱 선택하고 그것을 처리합니다.

희망 하시겠습니까?